/* ==========================================================================
   IYS — Components
   ========================================================================== */

/* ==========================================================================
   BRAND LOCKUP
   The mark sits left of a two-line wordmark set in Nyala, the official logo
   typeface — matching the master lockup artwork.
   ========================================================================== */
.brand{ display:inline-flex; align-items:center; gap:14px; }
.brand__mark{ width:auto; height:52px; flex-shrink:0; }

.wordmark{
  font-family:var(--font-wordmark);
  font-weight:400;
  font-size:17px;
  line-height:1.06;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy);
  white-space:nowrap;
}
/* "SERVICES" is set a shade cooler in the master artwork. */
.wordmark .wordmark__tail{ color:var(--secondary); }
.wordmark--on-dark{ color:var(--white); }
.wordmark--on-dark .wordmark__tail{ color:var(--steel); }

.brand--footer .brand__mark{ height:52px; }
.brand--footer .wordmark{ font-size:18px; }

@media (max-width:520px){
  .brand__mark{ height:36px; }
  .wordmark{ font-size:14px; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px;
  border:2px solid transparent;
  border-radius:var(--radius-btn);
  font-family:var(--font-body);
  font-size:var(--text-button);
  font-weight:700;
  letter-spacing:0.01em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease),
             border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(.98); }

.btn--primary{ background:var(--primary); color:var(--on-primary); }
.btn--primary:hover{ background:var(--primary-container); }

.btn--gold{ background:var(--gold-light); color:var(--navy-deep); }
.btn--gold:hover{ background:var(--white); }

.btn--ghost{ background:transparent; color:var(--primary); border-color:var(--primary); }
.btn--ghost:hover{ background:var(--primary); color:var(--on-primary); }

.btn--ghost-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.7); }
.btn--ghost-light:hover{ background:rgba(255,255,255,0.12); border-color:var(--white); }

.btn--block{ width:100%; }

/* Inline "How it works →" link */
.link-arrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--text-body-sm); font-weight:700;
  color:var(--primary);
  cursor:pointer;
  background:none; border:none; padding:0;
}
.link-arrow .arrow{ transition:transform var(--dur) var(--ease); }
.link-arrow:hover .arrow{ transform:translateX(4px); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  position:relative;
  display:flex; flex-direction:column;
  padding:var(--card-padding);
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.card:hover{
  box-shadow:var(--shadow-card);
  transform:translateY(-2px);
  border-color:var(--outline-variant);
}
.card h3{ margin-bottom:12px; }
.card p{ color:var(--mute); }
.card .grow{ flex-grow:1; }
.card--flat:hover{ transform:none; box-shadow:none; border-color:var(--border); }

/* Glass treatment used on the three-pillar row */
.card--glass{
  background:linear-gradient(155deg, rgba(255,255,255,0.96) 0%, rgba(242,244,246,0.9) 100%);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  overflow:hidden;
}
/* Reserve the corner so a wrapping title never runs under the index. */
.card--glass h3{ padding-right:52px; }
.card__index{
  position:absolute; top:14px; right:22px;
  font-family:var(--font-display);
  font-size:38px; font-weight:600; line-height:1;
  color:rgba(225,230,236,0.85);
  user-select:none; pointer-events:none;
}

/* Panel — the soft-filled block used opposite body copy */
.panel{
  background:var(--surface-container-low);
  border:1px solid var(--border);
  border-radius:var(--radius-panel);
  padding:40px;
}
@media (max-width:620px){ .panel{ padding:26px; } }

/* ==========================================================================
   TAGS, EYEBROW CHIPS, ICON CIRCLES
   ========================================================================== */
.tag{
  display:inline-block;
  padding:5px 12px;
  border-radius:var(--radius-full);
  background:var(--gold-wash);
  color:#8A6D22;
  font-size:var(--text-tag);
  font-weight:700;
  letter-spacing:0.06em;
  line-height:1;
  text-transform:uppercase;
}
.tag--dark{ background:rgba(228,200,122,0.16); color:var(--gold-light); }

.icon-circle{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; flex-shrink:0;
  border-radius:var(--radius-full);
  background:var(--navy);
  color:var(--gold-light);
  font-family:var(--font-display);
  font-size:15px; font-weight:600;
}
.icon-circle--gold{ background:var(--gold); color:var(--navy-deep); }

/* Material Symbols sizing */
.material-symbols-outlined{
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
  line-height:1;
}
.icon-tile{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:26px 18px;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  text-align:center;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.icon-tile:hover{ border-color:var(--gold); transform:translateY(-2px); }
.icon-tile .material-symbols-outlined{ font-size:30px; color:var(--navy-deep); }

/* ==========================================================================
   LISTS
   ========================================================================== */
.list-plain{ list-style:none; }
.list-plain li{
  display:flex; gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--border);
  font-size:14.5px;
  color:var(--ink);
}
.list-plain li:last-child{ border-bottom:none; }
.list-plain .dot{ color:var(--gold); font-weight:700; flex-shrink:0; }
.list-plain--on-dark li{ color:var(--white); border-bottom-color:var(--border-on-dark); }
.list-plain--on-dark .dot{ color:var(--gold-light); }

/* Check list used in the "independence" panel */
.list-check{ list-style:none; display:flex; flex-direction:column; gap:20px; }
.list-check li{ display:flex; gap:14px; align-items:flex-start; }
.list-check .material-symbols-outlined{
  color:var(--gold); font-size:22px; flex-shrink:0; margin-top:2px;
}
.list-check span:last-child{ color:var(--navy-deep); }

/* ==========================================================================
   PRICING ROWS
   ========================================================================== */
.pricing-line{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  padding:12px 0;
  border-top:1px solid var(--border);
  font-size:var(--text-body-sm);
  color:var(--mute);
}
.pricing-line .val{
  font-family:var(--font-display);
  font-size:15px; font-weight:600;
  color:var(--navy);
  text-align:right;
}
.footnote{ font-size:12px; color:var(--mute); margin-top:14px; line-height:1.55; }

/* ==========================================================================
   DISCIPLINE ACCORDION (Specialist Network)
   ========================================================================== */
.disc{ cursor:pointer; padding:20px var(--card-padding); }
.disc__head{ display:flex; align-items:center; gap:18px; }
.disc__head h3{ flex:1; font-size:16px; margin:0; }
.disc__chev{
  color:var(--gold);
  font-weight:700;
  font-size:20px;
  line-height:1;
  transition:transform var(--dur) var(--ease);
}
.disc.is-open .disc__chev{ transform:rotate(180deg); }
.disc__detail{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows var(--dur) var(--ease);
}
.disc.is-open .disc__detail{ grid-template-rows:1fr; }
.disc__detail > div{ overflow:hidden; }
.disc__detail p{
  padding-left:64px; padding-top:14px;
  color:var(--mute); font-size:14px;
}
@media (max-width:620px){
  .disc__detail p{ padding-left:0; }
}

/* ==========================================================================
   PROJECT CARDS
   ========================================================================== */
.project{ display:flex; flex-direction:column; cursor:pointer; }
.project__media{
  position:relative;
  height:230px;
  margin-bottom:20px;
  border-radius:var(--radius-card);
  overflow:hidden;
  background:linear-gradient(140deg,var(--primary-container),var(--navy-deep));
}
.project__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.project:hover .project__media img{ transform:scale(1.05); }
.project__media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,26,51,0.85) 0%, rgba(8,26,51,0.1) 55%, transparent 100%);
}
/* Placeholder tile for entries without photography — the mark, watermarked. */
.project__media--mark{
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(119,141,178,0.22);
}
.project__media--mark img{
  width:auto; height:56%;
  opacity:0.2;
  object-fit:contain;
}
.project__media--mark:hover img{ transform:none; }
.project__badge{
  position:absolute; left:22px; bottom:18px; z-index:2;
  font-size:var(--text-eyebrow);
  font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold-light);
}
.project h3{ color:var(--white); margin-bottom:6px; }
.project h3 .qualifier{
  color:var(--secondary-fixed-dim);
  font-family:var(--font-body);
  font-weight:400; font-size:14px;
}
.project p{ color:var(--secondary-fixed-dim); font-size:var(--text-body-sm); }

/* ==========================================================================
   ARTICLE CARDS (Insights)
   ========================================================================== */
.article{
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.article:hover{ box-shadow:var(--shadow-card); transform:translateY(-2px); }
.article__thumb{
  position:relative;
  height:128px;
  background:linear-gradient(135deg,var(--primary-container),var(--navy-deep));
}
.article__thumb::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 20%, rgba(228,200,122,0.22) 0%, transparent 62%);
}
.article__body{ padding:24px; }
.article__cat{
  font-size:var(--text-tag); font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold);
}
.article h3{ font-size:16.5px; line-height:1.35; margin-top:10px; }
.article p{ font-size:var(--text-body-sm); color:var(--mute); margin-top:10px; }

/* ==========================================================================
   CTA BANNER
   ========================================================================== */
.cta-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:24px;
  padding:48px;
  border-radius:var(--radius-panel);
  background:linear-gradient(120deg,var(--primary-container) 0%,var(--navy-deep) 100%);
  color:var(--white);
  overflow:hidden;
  position:relative;
}
.cta-banner::after{
  content:''; position:absolute; top:-40%; right:-8%;
  width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(228,200,122,0.14) 0%, transparent 70%);
  pointer-events:none;
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h3{ color:var(--white); max-width:520px; }
.cta-banner p{ color:var(--secondary-fixed-dim); margin-top:10px; max-width:520px; }
@media (max-width:620px){ .cta-banner{ padding:32px 26px; } }

/* ==========================================================================
   CONTACT — split panel
   ========================================================================== */
.contact-shell{
  display:grid;
  grid-template-columns:3fr 2fr;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius-panel);
  overflow:hidden;
  box-shadow:var(--shadow-panel);
}
@media (max-width:960px){ .contact-shell{ grid-template-columns:1fr; } }

.contact-shell__form{ padding:48px; }
.contact-shell__aside{
  display:flex; flex-direction:column; justify-content:space-between;
  padding:48px;
  background:var(--navy-deep);
  color:var(--white);
}
@media (max-width:620px){
  .contact-shell__form,.contact-shell__aside{ padding:28px; }
}
.contact-shell__aside h3{ color:var(--white); }
.contact-shell__aside p{ color:var(--secondary-fixed-dim); }

.contact-item{ display:flex; gap:14px; align-items:flex-start; }
.contact-item .material-symbols-outlined{ color:var(--gold-light); font-size:22px; flex-shrink:0; }
.contact-item .t-label{ color:var(--gold-light); letter-spacing:0.08em; text-transform:uppercase; }
.contact-item p{ color:var(--white); font-size:var(--text-body-default); margin-top:3px; }

.pull-quote{
  margin-top:40px; padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.14);
  font-size:var(--text-body-sm);
  font-style:italic;
  color:var(--secondary-fixed-dim);
  line-height:1.7;
}

/* ==========================================================================
   FORM
   ========================================================================== */
.form-row{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  margin-bottom:20px;
}
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:block; margin-bottom:20px; }
.field:last-of-type{ margin-bottom:0; }

label{
  display:block;
  font-size:var(--text-label);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--navy);
  margin-bottom:7px;
}
input,select,textarea{
  width:100%;
  padding:12px 14px;
  background:var(--surface-container-low);
  border:1.5px solid var(--border);
  border-radius:var(--radius-btn);
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink);
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
input::placeholder,textarea::placeholder{ color:#9AA7B4; }
input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--gold);
  background:var(--white);
}
textarea{ resize:vertical; min-height:118px; }

.role-picker{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.role-chip{
  padding:10px 18px;
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:var(--radius-full);
  font-size:var(--text-body-sm);
  font-weight:600;
  color:var(--mute);
  cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.role-chip:hover{ border-color:var(--navy-deep); color:var(--navy-deep); }
.role-chip.is-selected{
  background:var(--navy-deep);
  border-color:var(--navy-deep);
  color:var(--white);
}

.form-note{ font-size:11.5px; color:var(--mute); margin-top:14px; line-height:1.55; }

/* Submit success state, driven by js/main.js */
.btn.is-sent{ background:var(--success); color:var(--white); }
.btn:disabled{ opacity:.65; cursor:progress; transform:none; }

input[aria-invalid="true"],
textarea[aria-invalid="true"]{ border-color:var(--error); background:#FFF6F6; }

/* ---------- Verification challenge (js/security.js) ---------- */
.captcha{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px;
  padding:16px 18px;
  margin-bottom:20px;
  background:var(--surface-container-low);
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:var(--radius-btn);
}
.captcha__prompt{ flex:1 1 200px; }
.captcha__prompt label{ margin-bottom:4px; }
.captcha__question{
  font-family:var(--font-display);
  font-size:16px; font-weight:600;
  color:var(--navy);
}
.captcha input{ width:110px; }
.captcha__note{
  flex-basis:100%;
  font-size:11.5px; color:var(--mute); line-height:1.5;
}
/* display:flex above outranks the UA [hidden] rule — restore it explicitly,
   or the challenge shows while js/security.js still has it hidden. */
.captcha[hidden]{ display:none; }

/* ---------- Submission status ---------- */
.form-status{
  display:flex; gap:8px;
  margin-top:14px; padding:12px 14px;
  border-radius:var(--radius-btn);
  font-size:var(--text-body-sm); line-height:1.5;
}
.form-status[hidden]{ display:none; }
.form-status--error{ background:#FDECEC; color:#8C1D1D; border:1px solid #F3C9C9; }
.form-status--success{ background:#E8F5EE; color:#14603B; border:1px solid #BFE3D0; }