/* ===========================
   S.O.M.S. Case Study Theme
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#111827;

    color:#f8fafc;

    line-height:1.8;

}

/* ===========================
   Container
=========================== */

.container{
    width:min(1280px,92%);
    margin:0 auto;
    padding:60px 40px 100px;
}

/* ===========================
   PAGE HEADER
=========================== */

.page-header{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    gap:18px;

    margin-bottom:36px;

    padding-bottom:35px;

    border-bottom:1px solid #374151;

}

.page-header h1{

    font-size:3rem;
    font-weight:700;
    line-height:1.2;

}

.page-header p{

    color:#94a3b8;
    font-size:1.1rem;

}

.industry{

    display:inline-block;

    background:#d4a373;

    color:white;

    padding:8px 18px;

    border-radius:999px;

    font-size:.85rem;

    font-weight:600;

}

/* ===========================
   Back Button
=========================== */

.back-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

margin-bottom:20px;

background:transparent;

border:1px solid #374151;

border-radius:10px;

color:#cbd5e1;

text-decoration:none;

font-weight:600;

transition:.25s;

}

.back-btn:hover{

background:#d4a373;

border-color:#d4a373;

color:white;

transform:translateY(-2px);

}

/* ===========================
   Sections
=========================== */

section{

    background:#1f2937;

    border:1px solid #374151;

    border-radius:18px;

    padding:34px;

    margin-bottom:35px;

}

section h2{

    color:#d4a373;

    margin-bottom:25px;

    font-size:1.7rem;

}

section h3{

    margin-top:25px;

    margin-bottom:10px;

}

/* ===========================
   Dashboard
=========================== */

section img{

    width:100%;

    border-radius:12px;

   box-shadow:0 18px 40px rgba(0,0,0,.45);

}

/* ===========================
   Lists
=========================== */

ul{

    padding-left:22px;

}

li{

    margin-bottom:12px;

}

/* ===========================
   Table
=========================== */

table{

    width:100%;

    border-collapse:collapse;

    overflow:hidden;

    border-radius:10px;

}

th{

    background:#d4a373;

    color:white;

}

td,th{

    padding:15px;

    border-bottom:1px solid #374151;

    text-align:left;

}

tr:nth-child(even){

    background:#273244;

}

/* ===========================
   Footer
=========================== */

footer{

    margin-top:80px;

    padding-top:40px;

    border-top:1px solid #374151;

    text-align:center;

}

/* ===========================
   Hover Animation
=========================== */

section{

    transition:.3s;

}

section:hover{

    transform:translateY(-4px);

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

.page-header h1{

font-size:2rem;

}

.container{

width:92%;

}

section{

padding:25px;

}

}

/* =====================================================
   CASE STUDY LAYOUT
===================================================== */

.case-layout{

display:grid;

grid-template-columns:260px minmax(0,1fr);

gap:50px;

align-items:start;

margin-top:20px;

}

/* =====================================================
   SIDEBAR
===================================================== */

.case-sidebar{

position:sticky;

top:30px;

align-self:start;

background:#1f2937;

border:1px solid #374151;

border-radius:18px;

padding:28px;

height:fit-content;

}

.case-sidebar h3{

    color:#d4a373;

    margin-bottom:25px;

}

.case-sidebar a{

display:block;

padding:9px 14px;
margin-bottom:4px;

text-decoration:none;

color:#cbd5e1;

font-size:.95rem;

border-left:3px solid transparent;

border-radius:8px;

transition:all .25s ease;

}

.case-sidebar a:hover{

    background:#2b3748;

    border-left:3px solid #d4a373;

    color:white;

    padding-left:22px;

}

/* =====================================================
   CONTENT
===================================================== */

.case-content{

min-width:0;

max-width:900px;

}

.case-content section{

    scroll-margin-top:90px;

}

/* =====================================================
   MOBILE
===================================================== */

@media(max-width:900px){

.case-layout{

grid-template-columns:1fr;

}

.case-sidebar{

position:relative;

top:0;

margin-bottom:35px;

}

}
.project-navigation{

    display:flex;

    justify-content:center;

    gap:30px;

    margin-top:25px;

}

.project-navigation a{

    text-decoration:none;

    color:#d4a373;

    font-weight:600;

    transition:.3s;

}

.project-navigation a:hover{

    color:white;

}

/* ==========================================================
   PYTHON CAPSTONE - S.O.M.S. CASE STUDY EXTENSIONS
   Same Poppins / navy / warm-gold palette as the Airbnb page.
   ========================================================== */

:root {
  --page: #111827;
  --panel: #1f2937;
  --panel-alt: #172334;
  --border: #374151;
  --text: #f8fafc;
  --muted: #a9b7ca;
  --accent: #d4a373;
  --accent-deep: #c08457;
}

body { background: var(--page); color: var(--text); }

::selection { background: rgba(212,163,115,.45); color: white; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[hidden] { display:none !important; }

.container { width:min(1450px, 95%); padding: 38px 25px 58px; }
.back-btn { margin-bottom: 28px; }
.page-header { align-items:flex-start; gap:14px; padding:0 0 38px; margin-bottom:32px; border-color:var(--border); }
.page-header h1 { font-size:clamp(2.1rem, 3.5vw, 3.5rem); max-width:960px; line-height:1.13; letter-spacing:-.035em; }
.page-header p { max-width:920px; }
.header-tags { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.status-tag { display:inline-flex; align-items:center; padding:7px 15px; border-radius:100px; border:1px solid rgba(52,211,153,.33); background:rgba(6,95,70,.24); color:#a7f3d0; font-size:.78rem; font-weight:600; line-height:1.5; }
.eyebrow { color:var(--accent) !important; font-size:.72rem !important; font-weight:700; letter-spacing:.19em; }
.title-accent { color:var(--accent); }
.page-header .header-description { font-size:1.05rem; color:#b6c3d4; line-height:1.9; }
.tech-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:7px; }
.tech-tags span { border:1px solid #475569; color:#cbd5e1; font-size:.78rem; font-weight:500; border-radius:100px; padding:5px 12px; background:rgba(148,163,184,.055); }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:17px; }
.button-primary, .button-outline { display:inline-flex; gap:12px; align-items:center; justify-content:center; border-radius:10px; text-decoration:none; padding:11px 19px; font-size:.89rem; font-weight:700; line-height:1.4; transition:background .2s ease, transform .2s ease, border-color .2s ease; }
.button-primary { background:var(--accent-deep); color:white; border:1px solid var(--accent-deep); }
.button-primary:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.button-outline { background:transparent; color:#e2e8f0; border:1px solid #64748b; }
.button-outline:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.case-layout { grid-template-columns:240px minmax(0,1fr); gap:36px; margin-top:0; }
.case-sidebar { top:22px; padding:23px 18px; max-height:calc(100vh - 45px); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#475569 #1f2937; }
.case-sidebar .sidebar-title { font-size:1rem; font-weight:700; margin:0 10px 14px; color:var(--accent); }
.toc-nav { display:block; }
.case-sidebar .toc-nav a { font-size:.81rem; padding:8px 11px; margin:0 0 2px; line-height:1.5; border-left:3px solid transparent; }
.case-sidebar .toc-nav a.is-active { background:#2b3748; color:#fff; border-left-color:var(--accent); }
.sidebar-note { margin-top:17px; padding:17px 12px 4px; border-top:1px solid #374151; display:flex; flex-direction:column; gap:3px; }
.sidebar-note-label { color:var(--accent); font-size:.6rem; font-weight:700; letter-spacing:.09em; }
.sidebar-note strong { color:#f1f5f9; font-size:.81rem; }
.sidebar-note span:last-child { color:#9ca3af; font-size:.72rem; }
.case-content { max-width:none; }
.case-content section { scroll-margin-top:24px; }
.case-content section:hover { transform:translateY(-1px); }
.case-section { padding:31px 34px; margin-bottom:25px; border-radius:16px; }
.section-kicker { font-size:.71rem; color:var(--accent); letter-spacing:.14em; font-weight:700; margin-bottom:8px; }
.case-section h2 { margin:0 0 18px; font-size:clamp(1.4rem, 2.15vw, 1.86rem); line-height:1.3; letter-spacing:-.02em; }
.case-section h3 { font-size:1.03rem; font-weight:700; color:#f1f5f9; margin:18px 0 10px; line-height:1.5; }
.case-section p { color:#cbd5e1; font-size:.92rem; line-height:1.95; margin-bottom:13px; }
.case-section p:last-child { margin-bottom:0; }
.case-section p.lead { font-size:1rem; color:#e2e8f0; }
.case-section strong { color:#f8fafc; }
.case-section code { font-family:Consolas, Monaco, monospace; font-size:.87em; background:#111c2d; color:#f2cca6; border-radius:5px; padding:2px 5px; }
.small-note { font-size:.77rem !important; color:#98a9be !important; margin-top:13px; line-height:1.8 !important; }

.summary-points, .text-list { padding-left:22px; margin-top:14px; }
.summary-points { columns:2; column-gap:38px; }
.summary-points li, .text-list li { color:#cbd5e1; font-size:.88rem; padding-left:1px; line-height:1.75; margin-bottom:10px; break-inside:avoid; }
.summary-points li::marker { color:var(--accent); }
.text-list li::marker { color:var(--accent); }
.section-heading-row { display:flex; justify-content:space-between; align-items:start; gap:22px; margin-bottom:18px; }
.section-heading-row h2 { margin-bottom:7px; }
.section-heading-row p { margin-bottom:0; }
.subtle-link { display:inline-flex; align-items:center; flex:0 0 auto; gap:6px; font-size:.79rem; font-weight:700; text-decoration:none; color:var(--accent); border-bottom:1px solid rgba(212,163,115,.45); padding:5px 0; }
.subtle-link:hover { color:white; }
.dashboard-preview { position:relative; display:block; overflow:hidden; border-radius:12px; border:1px solid #475569; background:white; }
.dashboard-preview img { display:block; width:100%; height:auto; border-radius:0; box-shadow:none; }
.image-action { position:absolute; bottom:14px; right:14px; background:rgba(15,23,42,.9); color:#f8fafc; font-size:.76rem; font-weight:600; padding:8px 13px; border:1px solid rgba(255,255,255,.23); border-radius:10px; }
.image-caption { margin-top:11px; font-size:.77rem !important; color:#94a3b8 !important; }
.question-panel { padding:20px 24px; border-left:4px solid var(--accent); background:#172334; color:#f8fafc; font-size:1.17rem; font-weight:600; border-radius:0 10px 10px 0; line-height:1.65; margin:21px 0; }

.table-scroll { overflow-x:auto; margin-top:18px; border:1px solid #374151; border-radius:12px; }
.table-scroll table { min-width:630px; margin:0; border-radius:0; }
.table-scroll th { background:#c08457; color:white; padding:13px 16px; font-size:.76rem; text-transform:uppercase; letter-spacing:.025em; }
.table-scroll td { padding:12px 16px; font-size:.83rem; color:#dbe3ef; }
.table-scroll tr:nth-child(even) { background:#273244; }
.table-scroll .number { text-align:right; white-space:nowrap; color:#f8fafc; font-variant-numeric:tabular-nums; font-weight:700; }

.process-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 10px; }
.process-card { background:var(--panel-alt); border:1px solid #36465b; border-radius:12px; padding:17px 19px; }
.process-card > span { display:inline-block; color:var(--accent); font-size:.7rem; font-weight:800; margin-bottom:6px; letter-spacing:.08em; }
.process-card h3 { margin:0 0 6px; font-size:.94rem; }
.process-card p { font-size:.78rem; line-height:1.8; margin:0; color:#abbacd; }
.method-note { margin-top:17px; padding:17px 21px; border:1px solid #435166; border-radius:10px; background:#273244; color:#cbd5e1; font-size:.84rem; line-height:1.85; }
.pipeline { display:flex; gap:8px; align-items:center; justify-content:space-between; margin:23px 0 24px; }
.pipeline > div { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:4px; background:#172334; border:1px solid #435166; padding:15px 8px; text-align:center; border-radius:11px; }
.pipeline > div small { color:var(--accent); font-size:.65rem; letter-spacing:.05em; }
.pipeline > div strong { color:white; font-size:.87rem; }
.pipeline > div span { color:#a9b7ca; font-size:.68rem; }
.pipeline-arrow { color:var(--accent); font-size:1.35rem; font-weight:700; }
.formula-box { color:#f1f5f9; font-size:.92rem; font-weight:600; background:#101c2d; border:1px dashed #718096; padding:17px 20px; margin:10px 0 18px; border-radius:10px; overflow-wrap:anywhere; }

.kpi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.metric-card { min-width:0; background:#172334; border:1px solid #435166; border-radius:12px; padding:19px 16px 18px; display:flex; flex-direction:column; gap:6px; }
.metric-card > span { font-size:.72rem; color:var(--accent); font-weight:600; }
.metric-card strong { font-size:clamp(1rem,1.6vw,1.45rem); font-weight:700; line-height:1.35; font-variant-numeric:tabular-nums; }
.metric-card small { font-size:.68rem; color:#a9b7ca; line-height:1.5; }

.chart-count { color:#a9b7ca; font-size:.81rem; white-space:nowrap; margin-top:10px; }
.filter-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:19px; }
.filter-button { appearance:none; background:#152236; border:1px solid #475569; color:#cbd5e1; font-family:inherit; font-size:.77rem; font-weight:600; padding:8px 16px; border-radius:100px; cursor:pointer; transition:.2s; }
.filter-button:hover, .filter-button.is-active { color:#111827; border-color:var(--accent); background:var(--accent); }
.chart-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.chart-card { min-width:0; background:#172334; border:1px solid #3e4b5f; border-radius:12px; overflow:hidden; transition:transform .2s ease, border-color .2s ease; }
.chart-card:hover { transform:translateY(-3px); border-color:var(--accent); }
.chart-card > a { display:flex; width:100%; align-items:center; justify-content:center; height:232px; background:#fff; overflow:hidden; cursor:zoom-in; }
.chart-card > a img { width:100%; height:100%; object-fit:contain; display:block; border-radius:0; box-shadow:none; transition:transform .25s ease; }
.chart-card > a:hover img { transform:scale(1.025); }
.chart-info { padding:18px 18px 17px; }
.chart-info .chart-type { color:var(--accent); font-size:.64rem; letter-spacing:.11em; font-weight:800; text-transform:uppercase; }
.chart-info h3 { color:#f8fafc; font-size:.93rem; margin:7px 0 5px; }
.chart-info p { color:#a9b7ca; font-size:.78rem; line-height:1.75; margin:0; }

.takeaway-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.takeaway-item { display:flex; align-items:flex-start; gap:12px; padding:15px 14px; border:1px solid #3a485b; background:#172334; border-radius:11px; }
.takeaway-item > span { flex:0 0 28px; height:28px; display:grid; place-items:center; color:#f8fafc; border:1px solid #966e46; background:#694f37; border-radius:7px; font-size:.67rem; font-weight:800; }
.takeaway-item p { font-size:.79rem; line-height:1.75; margin:0; }
.insight-list { list-style:none; counter-reset:insight; margin:0; padding:0; }
.insight-list li { counter-increment:insight; position:relative; padding:13px 10px 13px 51px; margin:0; font-size:.87rem; color:#cbd5e1; line-height:1.85; border-bottom:1px solid #374151; }
.insight-list li:last-child { border-bottom:0; }
.insight-list li::before { content:counter(insight,decimal-leading-zero); position:absolute; top:14px; left:0; color:var(--accent); font-weight:800; font-size:.77rem; }
.recommendation-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.recommendation-card { min-width:0; background:#172334; border:1px solid #4c5260; border-top:3px solid var(--accent); border-radius:11px; padding:20px; }
.recommendation-card .rec-number { font-size:1.4rem; font-weight:800; color:var(--accent); }
.recommendation-card h3 { margin:9px 0; }
.recommendation-card p { font-size:.82rem; line-height:1.8; margin:0; }
.deliverable-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.download-card { display:flex; align-items:center; gap:12px; min-width:0; border:1px solid #405168; border-radius:11px; background:#172334; color:#f8fafc; padding:14px 13px; text-decoration:none; transition:.2s; }
.download-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.download-icon { flex:0 0 39px; min-height:39px; display:grid; place-items:center; border-radius:8px; background:#3c342b; color:#f1c99e; font-weight:800; font-size:.73rem; }
.download-card > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:3px; }
.download-card strong { font-size:.81rem; line-height:1.5; }
.download-card small { font-size:.69rem; color:#99a9bf; line-height:1.5; }
.download-arrow { margin-left:auto; color:var(--accent); font-size:1.13rem; }
.skills-block { border-top:1px solid #374151; margin-top:26px; padding-top:10px; }
.skills-block .tech-tags { margin-top:10px; }
footer { margin-top:30px; padding-top:24px; }
footer p { font-size:.81rem; color:#94a3b8; }
.project-navigation { flex-wrap:wrap; }

/* Enlarged chart viewer - standard browser dialog; no external JS library */
.image-dialog { border:1px solid #5a6476; border-radius:16px; padding:0; background:#111827; color:#f8fafc; width:min(1400px,96vw); max-width:96vw; max-height:94vh; box-shadow:0 30px 75px rgba(0,0,0,.6); overflow:hidden; }
.image-dialog::backdrop { background:rgba(2,6,23,.84); }
.dialog-header { display:flex; gap:20px; align-items:center; justify-content:space-between; padding:12px 17px; border-bottom:1px solid #374151; }
.dialog-header p { font-size:.85rem; font-weight:600; margin:0; }
.close-dialog { color:white; background:#334155; border:1px solid #64748b; border-radius:9px; width:36px; height:36px; font-size:1.5rem; cursor:pointer; line-height:1; }
.close-dialog:hover { background:#c08457; }
.dialog-image-wrapper { display:flex; align-items:center; justify-content:center; background:#fff; overflow:auto; max-height:77vh; }
.dialog-image-wrapper img { display:block; max-width:100%; max-height:77vh; object-fit:contain; }
.dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; color:#a9b7ca; font-size:.71rem; padding:10px 18px; }
.dialog-footer a { color:var(--accent); font-weight:700; text-decoration:none; }
.dialog-footer a:hover { color:white; }
.back-to-top { position:fixed; right:24px; bottom:23px; background:#c08457; color:#fff; font-size:1.15rem; width:44px; height:44px; border:0; border-radius:12px; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px); transition:.2s; z-index:20; box-shadow:0 10px 25px rgba(0,0,0,.25); }
.back-to-top.is-visible { opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover { background:var(--accent); }

@media (max-width:1100px) {
  .container { width:96%; padding-left:16px; padding-right:16px; }
  .case-layout { grid-template-columns:210px minmax(0,1fr); gap:20px; }
  .case-section { padding:25px 24px; }
  .summary-points { columns:1; }
  .chart-card > a { height:190px; }
}

@media (max-width:900px) {
  .case-layout { grid-template-columns:1fr; gap:14px; }
  .case-sidebar { position:relative; top:0; max-height:none; overflow:visible; margin-bottom:7px; padding:20px; }
  .toc-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:6px; }
  .case-sidebar .toc-nav a { margin:0; }
  .sidebar-note { display:none; }
  .case-content { max-width:none; }
  .page-header { margin-bottom:21px; }
}

@media (max-width:640px) {
  .container { width:96%; padding:19px 9px 45px; }
  .back-btn { font-size:.8rem; margin-bottom:23px; }
  .page-header h1 { font-size:2.1rem; }
  .page-header .header-description { font-size:.88rem; }
  .industry { font-size:.7rem; }
  .case-sidebar { padding:15px; }
  .toc-nav { grid-template-columns:1fr 1fr; }
  .case-sidebar .toc-nav a { font-size:.73rem; padding:6px 7px; }
  .case-section { padding:22px 17px; margin-bottom:16px; }
  .case-section p { font-size:.85rem; }
  .summary-points { columns:1; }
  .summary-points li { font-size:.81rem; }
  .section-heading-row { flex-direction:column; gap:9px; }
  .question-panel { font-size:.98rem; padding:14px 16px; }
  .process-grid, .takeaway-grid, .chart-gallery, .recommendation-grid, .deliverable-grid { grid-template-columns:1fr; }
  .pipeline { flex-wrap:wrap; justify-content:center; gap:5px; }
  .pipeline > div { flex:1 1 40%; min-width:130px; }
  .pipeline-arrow { display:none; }
  .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .metric-card { padding:15px 12px; }
  .metric-card strong { font-size:1rem; overflow-wrap:anywhere; }
  .chart-card > a { height:235px; }
  .dialog-footer span { display:none; }
  .back-to-top { right:13px; bottom:15px; }
  .project-navigation { gap:10px; }
}

@media (max-width:390px) {
  .toc-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-grid { grid-template-columns:1fr; }
  .chart-card > a { height:185px; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; }
  section:hover, .chart-card:hover, .download-card:hover { transform:none !important; }
}