/* Shared section colors and project endings across INTERIKA. */
:root{--dark:#111111;--on-dark:#f3f0e9;--muted-on-dark:#cbc5bb}
.surface-panel{background:var(--paper-2,#f5f5f5);--muted:#68645d;--ip-muted:#68645d;--ip-accent:#b63424}

.catalog-introduction{max-width:1240px;margin:64px auto 56px;padding:48px clamp(24px,4vw,64px)}
.catalog-introduction .portfolio-heading{margin:0 0 26px;max-width:none}
.catalog-introduction .catalog-intro{margin:0;max-width:660px}
.portfolio-heading .portfolio-title-dot{color:var(--red,#c43a27)}
#portfolio .site-modal__panel--portfolio .portfolio-heading{background:var(--paper-2,#f5f5f5);padding:48px clamp(24px,4vw,64px);margin-top:48px}
.project-view .project-view__header{background:var(--paper-2,#f5f5f5);padding:48px clamp(24px,4vw,64px);margin-top:36px;margin-bottom:56px}
.project-view .project-view__header .project-view__eyebrow,.project-view .project-view__header .project-view__facts{color:#68645d}
#project-dr-dre .interika-project .ip-intro.surface-panel{padding:64px clamp(24px,4vw,64px);margin:64px 0 96px}

.project-contact{max-width:1240px;margin:64px auto 0;background:var(--dark,#111111);color:var(--on-dark);padding:64px clamp(24px,4vw,64px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:40px}
.project-contact .project-contact__eyebrow{font:500 10px/1.5 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted-on-dark);margin:0 0 24px}
.project-contact__eyebrow::before{content:"";display:inline-block;width:22px;height:2px;background:var(--red,#c43a27);vertical-align:middle;margin:0 12px 3px 0}
.project-contact .project-contact__title{font:500 clamp(36px,4.8vw,64px)/.98 var(--display);letter-spacing:-.05em;margin:0 0 24px;color:var(--on-dark)}
.project-contact .project-contact__text{font:400 15px/1.65 var(--body);color:var(--muted-on-dark);max-width:500px;margin:0}
.project-contact__actions{display:grid;justify-items:stretch;gap:18px;min-width:224px}
.project-contact .project-contact__primary{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:56px;padding:18px 22px;background:var(--on-dark);color:var(--dark);font:500 12px/1.4 var(--body);text-decoration:none;border:1px solid var(--on-dark)}
.project-contact .project-contact__primary:hover{background:var(--paper-2,#f5f5f5);border-color:var(--paper-2,#f5f5f5)}
.project-contact .project-contact__secondary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:8px 0;border-bottom:1px solid rgba(243,240,233,.42);font:400 12px/1.5 var(--body);color:var(--on-dark);text-decoration:none}
.project-contact a:focus-visible{outline:2px solid var(--on-dark);outline-offset:6px}
.project-links{max-width:1240px;margin:28px auto 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:400 12px/1.5 var(--body);color:var(--muted,#6e6a63)}
.project-links a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.project-links a:hover{color:var(--ink,#111111)}

@media(max-width:760px){
 .project-contact{grid-template-columns:1fr;gap:32px;padding:40px 24px;margin-top:48px}
 .project-contact__actions{min-width:0;width:100%;max-width:400px}
 .project-contact .project-contact__title{font-size:clamp(34px,7.5vw,48px)}
 #project-dr-dre .interika-project .ip-intro.surface-panel{grid-template-columns:1fr;padding:36px 24px;margin:44px 0 68px;gap:20px}
}
@media(max-width:700px){
 .catalog-introduction{padding:28px 20px;margin:36px auto 34px}
 .catalog-introduction .portfolio-heading{margin-bottom:22px}
 .catalog-introduction .catalog-title{font-size:clamp(34px,8.5vw,48px)}
 #portfolio .site-modal__panel--portfolio .portfolio-heading{padding:28px 20px;margin-top:32px;margin-bottom:34px}
 #portfolio .site-modal__panel--portfolio .portfolio-heading h2{font-size:clamp(31px,8vw,48px)}
 .project-view .project-view__header{padding:30px 24px;margin-top:24px;margin-bottom:34px}
 .project-view .project-view__header h2{font-size:clamp(32px,8vw,54px)}
 .project-links{font-size:11px;margin-top:20px;gap:12px}
}

/* Keep common 4:3 card frames and per-project native pixel budgets. */
#portfolio .pp-card.pp-card--compact-cover .pp-card__image{aspect-ratio:4/3;display:grid;place-items:center;background:var(--paper-2,#f5f5f5);border:1px solid #d4cdc4}
#portfolio .pp-card.pp-card--compact-cover .pp-card__image img{width:min(100%,var(--cover-frame-cap,640px));height:auto;aspect-ratio:4/3;object-fit:contain;transform:none}
.services-project-example{max-width:630px;margin:24px 0 0;font-size:14px;line-height:1.65;color:#514d46}
.services-project-example a{font:600 11px/1.35 var(--body);letter-spacing:.055em;text-transform:uppercase;color:var(--red,#c43a27);white-space:nowrap;text-decoration:none}
.services-project-example a:hover{color:var(--ink,#111111)}
.services-project-example a:focus-visible{outline:2px solid var(--red,#c43a27);outline-offset:4px}
@media(max-width:700px){.services-project-example a{font-size:12px}}

/* Services: give every label and arrow its own bounded grid cell. */
#services .service-row{grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.4fr) 132px 24px;gap:clamp(18px,2vw,32px);align-items:center}
#services .service-row>div{min-width:0}
#services .service-name{line-height:1.12;overflow-wrap:break-word}
#services .service-price{font:500 13px/1.5 var(--body);letter-spacing:.02em;white-space:normal;text-align:right}
#services .service-arrow{width:24px;justify-self:end;line-height:1;transform:none}
@media(max-width:1200px){
 #services .service-row{grid-template-columns:44px minmax(0,1fr) 24px;gap:16px 24px;padding:26px 0}
 #services .service-num{grid-column:1;grid-row:1;align-self:start}
 #services .service-name{grid-column:2;grid-row:1}
 #services .service-arrow{grid-column:3;grid-row:1;align-self:start}
 #services .service-desc{grid-column:2;grid-row:2;max-width:650px}
 #services .service-price{grid-column:2;grid-row:3;justify-self:start;text-align:left;margin-top:0}
}
@media(max-width:700px){
 #services .service-row{grid-template-columns:30px minmax(0,1fr) 24px;gap:12px 14px;padding:24px 0}
 #services .service-name{font-size:clamp(18px,5vw,25px)}
 #services .service-desc{font-size:13px;line-height:1.65}
 #services .service-price{font-size:12px}
}