/* =====================================================================
   PrimeHarbor — utilities.css
   Single-purpose helpers: grid, flex, spacing, text, surfaces.
   ===================================================================== */
.grid { display:grid; gap: clamp(20px,2.4vw,34px); }
.g-2 { grid-template-columns: repeat(2,1fr); }
.g-3 { grid-template-columns: repeat(3,1fr); }
.g-4 { grid-template-columns: repeat(4,1fr); }
.g-auto { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
@media (max-width:940px){ .g-3,.g-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .g-2,.g-3,.g-4 { grid-template-columns:1fr; } }

.grid-12 { display:grid; grid-template-columns: repeat(12,1fr); gap: clamp(20px,2.4vw,36px); }
.col-3{grid-column:span 3;} .col-4{grid-column:span 4;} .col-5{grid-column:span 5;}
.col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;} .col-9{grid-column:span 9;}
@media (max-width:860px){ .grid-12 > *{ grid-column:1 / -1 !important; } }

.masonry { column-count:3; column-gap: clamp(18px,2vw,28px); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(18px,2vw,28px); }
@media (max-width:900px){ .masonry { column-count:2; } }
@media (max-width:560px){ .masonry { column-count:1; } }

.split { display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,5vw,76px); align-items:center; }
.split--reverse .split__media { order:2; }
.split__media { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh-2); position:relative; }
.split__media img, .split__media svg { width:100%; aspect-ratio:4/3.4; object-fit:cover; }
@media (max-width:820px){ .split { grid-template-columns:1fr; } .split--reverse .split__media{ order:0; } }

.flex { display:flex; } .flex-col { display:flex; flex-direction:column; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.flex-center { display:flex; align-items:center; justify-content:center; }
.items-end { align-items:flex-end; } .items-start { align-items:flex-start; }
.wrap-gap { flex-wrap:wrap; gap:1rem; }
.gap-sm{gap:.6rem;} .gap-md{gap:1.2rem;} .gap-lg{gap:2rem;}

.mt-1{margin-top:.6rem;} .mt-2{margin-top:1.2rem;} .mt-3{margin-top:1.8rem;} .mt-4{margin-top:2.6rem;} .mt-5{margin-top:3.4rem;}
.mb-1{margin-bottom:.6rem;} .mb-2{margin-bottom:1.2rem;} .mb-3{margin-bottom:1.8rem;} .mb-4{margin-bottom:2.6rem;}
.stack > * + *{ margin-top:1.1rem; } .stack-lg > * + *{ margin-top:1.9rem; }

.text-center{text-align:center;} .text-right{text-align:right;}
.uppercase{ font-family:var(--ff-display); text-transform:uppercase; letter-spacing:.14em; font-size:.74rem; font-weight:700; }
.serif{ } .display{ font-family: var(--ff-display); }
.max-40{max-width:40ch;} .max-50{max-width:50ch;} .max-60{max-width:60ch;} .max-70{max-width:70ch;}

.rounded{ border-radius: var(--r-lg);} .rounded-md{ border-radius: var(--r-md);} .rounded-xl{ border-radius: var(--r-xl);}
.shadow{ box-shadow: var(--sh-1);} .shadow-lg{ box-shadow: var(--sh-2);}
.bordered{ border:1px solid var(--line);} .full{ width:100%;}
.obj-cover{ object-fit:cover; width:100%; height:100%; }
.ratio-1{aspect-ratio:1;} .ratio-43{aspect-ratio:4/3;} .ratio-169{aspect-ratio:16/9;} .ratio-32{aspect-ratio:3/2;}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:720px){ .hide-mobile{ display:none!important; } }
@media (min-width:721px){ .only-mobile{ display:none!important; } }

.hr{ height:1px; background: var(--line); border:0; }
.dot{ width:7px; height:7px; border-radius:50%; background: var(--cyan); display:inline-block; }
.kbd{ font-family: var(--ff-display); font-size:.78rem; padding:.15em .5em; border:1px solid var(--line); border-radius:6px; background: var(--light); }
.num{ font-family: var(--ff-display); font-weight:800; font-size:1.1rem; color: var(--ocean); }
.ribbon{ display:inline-block; transform:rotate(-2deg); background: var(--cyan); color: var(--navy); font-family:var(--ff-display); font-weight:700; font-size:.76rem; padding:.3em .9em; border-radius:6px; }