/* ===========================================================
   Pipeline Immigration Consulting — Prototype v2
   Built from pipelineimmigration_website_spec.md (Section 2)
   =========================================================== */

:root{
  --forest:      #254D3B;
  --forest-dark: #1c3c2e;
  --terracotta:  #B15A3E;
  --terracotta-dark: #964a32;
  --ink:         #163023;
  --paper:       #FAF8F3;
  --paper-dim:   #F1EAE0;
  --slate:       #6B6864;
  --gold:        #B08D3E;
  --line:        #E4D9CC;
  --ink-text:    #2E2A28;

  --radius: 6px;
  --shadow: 0 6px 24px rgba(22,48,35,0.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', sans-serif;
  background-color:var(--paper);
  color:var(--ink-text);
  font-size:16px;
  line-height:1.6;
}
@media(min-width:768px){ body{ font-size:17px; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
input,textarea,select{ font-family:inherit; font-size:inherit; }

h1,h2,h3,h4{
  font-family:'Newsreader', serif;
  font-weight:500;
  letter-spacing:-0.01em;
  color:var(--forest);
  line-height:1.15;
}
h1{ font-size:34px; }
h2{ font-size:30px; }
h3{ font-size:22px; }
@media(min-width:768px){
  h1{ font-size:52px; }
  h2{ font-size:38px; }
  h3{ font-size:24px; }
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--terracotta);
  font-size:11px;
  font-weight:600;
  display:inline-block;
  margin-bottom:14px;
}

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:64px 0; }
@media(min-width:768px){ section{ padding:96px 0; } }

.bg-dim{ background-color:var(--paper-dim); }
.bg-forest{ background-color:var(--forest); color:#fff; }
.bg-forest h2, .bg-forest h3{ color:#fff; }

.section-head{ max-width:640px; margin-bottom:44px; }
.section-head p{ color:var(--slate); margin-top:14px; font-size:17px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px;
  border-radius:3px;
  font-weight:600; font-size:15px;
  transition: background .15s ease, transform .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--terracotta); outline-offset:2px; }

.btn-primary{ background-color:var(--forest); color:#fff; }
.btn-primary:hover{ background-color:var(--forest-dark); }

.btn-secondary{ background-color:var(--terracotta); color:#fff; }
.btn-secondary:hover{ background-color:var(--terracotta-dark); }

.btn-outline{ background:transparent; color:var(--forest); border:1.5px solid var(--forest); }
.btn-outline:hover{ background:var(--forest); color:#fff; }

.btn-outline-white{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.6); }
.btn-outline-white:hover{ background:#fff; color:var(--forest); }

.btn-lg{ padding:16px 32px; font-size:16px; }
.btn-block{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  background-color:var(--forest);
  color:#fff;
  position:sticky; top:0; z-index:100;
}
.site-header a{ color:#fff; text-decoration:none; }
.nav{ display:flex; align-items:center; justify-content:space-between; height:160px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Newsreader',serif; font-size:20px; font-weight:500; }
.logo .mark{ width:30px; height:30px; border:1.5px solid rgba(255,255,255,.7); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.logo .mark svg{ width:16px; height:16px; }
.logo-img{ height:128px; width:auto; display:block; border-radius:8px; }
.footer-grid .logo-img{ height:150px; }

.nav-links{ display:none; gap:30px; font-size:14px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; opacity:.9; }
.nav-links a:hover, .nav-links a.active{ opacity:1; color:var(--gold); }

.nav-right{ display:flex; align-items:center; gap:16px; }
.nav-toggle{ display:flex; flex-direction:column; gap:5px; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:#fff; border-radius:2px; }

@media(min-width:1024px){
  .nav-links{ display:flex; }
  .nav-toggle{ display:none; }
}

.mobile-drawer{
  position:fixed; inset:160px 0 0 0;
  background:var(--forest);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:99;
  padding:32px 24px;
  display:flex; flex-direction:column; gap:22px;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer a{ font-size:18px; font-weight:600; }
@media(min-width:1024px){ .mobile-drawer{ display:none; } }

/* ---------- Hero ---------- */
.hero{ padding:56px 0 72px; }
.hero .container{ display:grid; gap:40px; align-items:center; }
@media(min-width:900px){
  .hero .container{ grid-template-columns:52% 48%; gap:48px; }
  .hero{ padding:88px 0 100px; }
}
.hero .sub{ color:var(--slate); font-size:18px; max-width:480px; margin-bottom:30px; }
.hero .cta-group{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; }
.hero-visual{ border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.hero-visual img{ width:100%; height:100%; object-fit:cover; }

.trust-statement{
  display:flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--forest); font-weight:600;
  background:var(--paper-dim);
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 16px;
  width:fit-content;
}
.trust-statement svg{ width:16px; height:16px; color:var(--terracotta); flex-shrink:0; }

/* ---------- Service cards ---------- */
.card-grid{ display:grid; gap:24px; grid-template-columns:1fr; }
@media(min-width:640px){ .card-grid.cols-2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } }

.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:background .15s ease, transform .15s ease;
}
.service-card:hover{ background-color:var(--paper-dim); transform:translateY(-2px); }
.service-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.service-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.service-card .body{ padding:22px 24px; }
.service-card h3{ margin-bottom:8px; }
.service-card p{ color:var(--slate); font-size:15px; margin-bottom:14px; }
.service-card a{ color:var(--terracotta); font-weight:600; font-size:14px; }
.service-card a:hover{ text-decoration:underline; }

/* ---------- Chip ---------- */
.chip{
  display:inline-block;
  border:1px solid var(--terracotta);
  color:var(--terracotta);
  background-color:#FBF1EC;
  border-radius:6px;
  padding:6px 12px;
  font-size:11px;
  font-weight:600;
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.04em;
}

/* ---------- Service detail block (full page) ---------- */
.service-detail{
  display:grid; gap:0;
  border-bottom:1px solid var(--line);
}
.service-detail:last-child{ border-bottom:none; }
.service-detail .visual{ aspect-ratio:16/10; overflow:hidden; }
.service-detail .visual img{ width:100%; height:100%; object-fit:cover; }
.service-detail .content{ padding:48px 0; }
@media(min-width:900px){
  .service-detail{ grid-template-columns:1fr 1fr; align-items:center; gap:56px; }
  .service-detail.reverse .visual{ order:2; }
  .service-detail .content{ padding:64px 0; }
}
.service-detail ul{ margin:16px 0 22px; }
.service-detail ul li{
  padding-left:20px; position:relative; margin-bottom:9px; font-size:15px; color:var(--ink-text);
}
.service-detail ul li::before{
  content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--terracotta);
}

/* ---------- Bio card ---------- */
.bio-card{ display:grid; gap:36px; align-items:center; }
@media(min-width:800px){ .bio-card{ grid-template-columns:280px 1fr; } }
.bio-photo{
  aspect-ratio:1/1; border-radius:var(--radius);
  background:var(--paper-dim);
  border:1px dashed #C9BBA6;
  display:flex; align-items:center; justify-content:center;
  color:var(--slate); font-size:13px; text-align:center; padding:20px; font-weight:600;
}
.bio-card ul{ margin:18px 0; }
.bio-card ul li{ padding:8px 0; border-bottom:1px solid var(--line); font-size:15px; }
.bio-card ul li:last-child{ border-bottom:none; }
.bio-card ul li strong{ color:var(--forest); }

/* ---------- Pricing table ---------- */
.pricing-table{ display:flex; flex-direction:column; gap:20px; }
.pricing-row{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 30px;
  display:grid; gap:16px;
}
@media(min-width:800px){
  .pricing-row{ grid-template-columns:1.4fr 0.7fr 0.7fr 1.6fr auto; align-items:center; gap:24px; }
}
.pricing-row .name{ font-family:'Newsreader',serif; font-size:20px; color:var(--forest); }
.pricing-row .price{ font-size:24px; font-weight:700; color:var(--terracotta); font-family:'IBM Plex Mono',monospace; }
.pricing-row .duration{ font-size:13px; color:var(--slate); font-family:'IBM Plex Mono',monospace; text-transform:uppercase; letter-spacing:.05em; }
.pricing-row .desc{ font-size:14px; color:var(--slate); }
.pricing-row.featured{ border-color:var(--terracotta); border-width:2px; }

.disclaimer-box{
  background:var(--paper-dim);
  border-left:3px solid var(--terracotta);
  padding:20px 24px;
  font-size:14px;
  color:var(--slate);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* ---------- Why choose / feature list ---------- */
.why-list{ display:grid; gap:20px; }
@media(min-width:768px){ .why-list{ grid-template-columns:repeat(2,1fr); } }
.why-item{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.why-item .num{
  font-family:'IBM Plex Mono',monospace; font-weight:600; color:var(--terracotta);
  font-size:13px; flex-shrink:0; padding-top:3px;
}
.why-item h3{ font-size:18px; margin-bottom:6px; }
.why-item p{ color:var(--slate); font-size:14px; }

/* ---------- Forms ---------- */
.form-group{ margin-bottom:20px; }
.form-group label{ display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--forest); }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:4px; background:#fff;
  transition:border-color .15s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  outline:none; border-color:var(--terracotta);
}
.form-row{ display:grid; gap:20px; }
@media(min-width:640px){ .form-row.two{ grid-template-columns:1fr 1fr; } }
.form-checkbox{ display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--slate); }
.form-checkbox input{ width:auto; margin-top:3px; }
.form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px; }
.form-note{ font-size:12px; color:var(--slate); margin-top:10px; }

/* ---------- Accordion ---------- */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 0; text-align:left;
  font-family:'Newsreader',serif; font-size:18px; color:var(--forest); font-weight:500;
}
.accordion-trigger .plus{ transition:transform .2s ease; font-size:20px; color:var(--terracotta); flex-shrink:0; font-family:'Inter',sans-serif; }
.accordion-item.open .plus{ transform:rotate(45deg); }
.accordion-panel{ max-height:0; overflow:hidden; transition:max-height .25s ease; color:var(--slate); font-size:15px; }
.accordion-item.open .accordion-panel{ padding-bottom:20px; }

/* ---------- Article cards (Resources) ---------- */
.article-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px;
}
.article-card .chip{ margin-bottom:12px; }
.article-card h3{ font-size:18px; margin-bottom:8px; }
.article-card p{ color:var(--slate); font-size:14px; }
.article-card a{ color:var(--terracotta); font-weight:600; font-size:14px; }
.article-card a:hover{ text-decoration:underline; }
.category-block{ margin-bottom:56px; }

/* ---------- Article pages ---------- */
.article-content{ max-width:760px; margin:0 auto; }
.article-content .article-meta{ font-size:13px; color:var(--slate); font-family:'IBM Plex Mono',monospace; margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.article-content h2{ font-size:22px; margin:32px 0 12px; color:var(--forest); }
.article-content p{ color:var(--ink-text); font-size:16px; line-height:1.75; margin-bottom:16px; }
.article-content ul{ margin:0 0 16px 20px; }
.article-content ul li{ font-size:16px; line-height:1.75; color:var(--ink-text); margin-bottom:6px; }
.category-block h2{ margin-bottom:24px; }

/* ---------- CTA banner ---------- */
.cta-banner{ background:var(--forest); color:#fff; padding:64px 0; text-align:center; }
.cta-banner h2{ color:#fff; margin-bottom:12px; }
.cta-banner p{ color:rgba(255,255,255,.78); margin-bottom:30px; font-size:17px; }
.cta-banner .cta-group{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.site-footer{ background-color:var(--ink); color:#D3DBD5; padding:56px 0 0; }
.site-footer a{ color:#fff; }
.footer-grid{ display:grid; gap:36px; grid-template-columns:1fr; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.1); }
@media(min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr 1fr; } }
.footer-grid h4{ color:#fff; font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.footer-grid ul li{ margin-bottom:10px; font-size:14px; color:#D3DBD5; }
.footer-grid ul li a{ color:#D3DBD5; }
.footer-grid ul li a:hover{ color:#fff; }
.footer-desc{ font-size:14px; margin-bottom:14px; max-width:280px; color:#D3DBD5; }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  padding:22px 0; font-size:12px; color:rgba(211,219,213,.6);
}
.footer-bottom a{ color:rgba(211,219,213,.6); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom .links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-bottom .cicc-badge{ height:100px; width:auto; display:block; }
.rcic-badge{ height:110px; width:auto; display:block; margin-top:8px; background:#fff; padding:8px 12px; border-radius:6px; }

/* ---------- Social icons ---------- */
.social-icons{ display:flex; gap:16px; margin-top:16px; }
.social-icons a{ color:var(--gold); display:flex; align-items:center; justify-content:center; transition:opacity .15s ease, transform .15s ease; }
.social-icons a:hover{ opacity:.7; transform:translateY(-2px); }
.social-icons svg{ width:22px; height:22px; fill:currentColor; }
.contact-socials{ margin-top:20px; }
.contact-socials .social-icons{ gap:20px; }
.contact-socials .social-icons svg{ width:26px; height:26px; }
.contact-socials p{ font-family:'IBM Plex Mono',monospace; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--slate); margin-bottom:10px; }

/* ---------- Page hero (interior) ---------- */
.page-hero{ padding:56px 0 44px; background:var(--paper-dim); }
.page-hero p{ color:var(--slate); max-width:600px; margin-top:14px; font-size:17px; }

/* ---------- utils ---------- */
.text-center{ text-align:center; }
.mt-24{ margin-top:24px; }
.placeholder-note{
  font-size:12px; color:var(--terracotta); font-family:'IBM Plex Mono',monospace;
  border:1px dashed var(--terracotta); border-radius:4px; padding:10px 14px; display:inline-block;
}

/* ---------- Booking widget (prototype) ---------- */
.prototype-banner{
  background:var(--paper-dim); border:1px dashed var(--terracotta); border-radius:var(--radius);
  padding:16px 20px; font-size:14px; color:var(--slate); margin-bottom:32px;
}
.prototype-banner strong{ color:var(--terracotta); }

.booking-widget{ margin-top:8px; }
.booking-step{ margin-bottom:32px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.booking-step:last-of-type{ border-bottom:none; padding-bottom:0; margin-bottom:24px; }
.step-label{
  display:flex; align-items:center; gap:10px; font-family:'Newsreader',serif;
  font-size:18px; color:var(--forest); margin-bottom:16px;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--forest); color:#fff; font-family:'IBM Plex Mono',monospace;
  font-size:13px; flex-shrink:0;
}

.consult-type-grid{ display:grid; gap:14px; }
@media(min-width:640px){ .consult-type-grid{ grid-template-columns:1fr 1fr; } }
.consult-type-card{
  position:relative; display:flex; flex-direction:column; gap:4px;
  border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.consult-type-card input{ position:absolute; opacity:0; }
.consult-type-card .name{ font-weight:600; color:var(--forest); }
.consult-type-card .price{ font-family:'IBM Plex Mono',monospace; color:var(--terracotta); font-size:18px; font-weight:700; }
.consult-type-card .duration{ font-size:12px; color:var(--slate); text-transform:uppercase; letter-spacing:.05em; }
.consult-type-card:has(input:checked){ border-color:var(--terracotta); border-width:2px; background:var(--paper-dim); }

.day-strip{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.day-pill{
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:8px 14px;
  border-radius:20px; border:1px solid var(--line); color:var(--slate);
}
.day-pill.active{ background:var(--forest); color:#fff; border-color:var(--forest); }
.day-pill.closed{ opacity:.45; }

.slot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
@media(min-width:640px){ .slot-grid{ grid-template-columns:repeat(6,1fr); } }
.slot-btn{
  position:relative; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:13px;
  padding:10px 6px; border:1px solid var(--line); border-radius:4px; cursor:pointer;
  color:var(--ink-text); transition:border-color .15s ease, background .15s ease;
}
.slot-btn input{ position:absolute; opacity:0; }
.slot-btn:has(input:checked){ border-color:var(--terracotta); border-width:2px; background:var(--paper-dim); font-weight:600; }
.slot-btn.taken{ opacity:.4; text-decoration:line-through; cursor:not-allowed; background:var(--paper-dim); }

.hold-note{ font-size:13px; color:var(--terracotta); margin-top:4px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}