/* =========================================================================
   Island Collection — Home and About sections (from the V2 mockups)
   ========================================================================= */

/* ---------- Hero ---------- */
.ic-hero{position:relative;overflow:hidden;color:#fff;margin:0;
  background-image:radial-gradient(ellipse 60% 90% at 22% 50%,rgba(0,0,0,.92),rgba(0,0,0,0) 78%)}
.ic-hero::before,.ic-hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(10px)}
.ic-hero::before{width:620px;height:620px;right:-120px;top:-180px;
  background:radial-gradient(circle,rgba(25,179,166,.26),rgba(25,179,166,0) 68%);animation:ic-float 16s ease-in-out infinite alternate}
.ic-hero::after{width:520px;height:520px;left:-180px;bottom:-280px;
  background:radial-gradient(circle,rgba(224,131,107,.12),rgba(224,131,107,0) 68%);animation:ic-float 20s ease-in-out infinite alternate-reverse}
@keyframes ic-float{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,26px,0)}}
.ic-herogrid{position:relative;z-index:1;max-width:var(--ic-wrap);margin:0 auto;padding:64px var(--ic-gutter) 68px;
  display:grid;grid-template-columns:1fr 1.32fr;gap:44px;align-items:center}
.ic-herogrid > *{margin:0 !important}
.ic-hero-copy > *{animation:ic-rise .8s cubic-bezier(.2,.7,.2,1) both}
.ic-hero-copy > *:nth-child(2){animation-delay:.08s}
.ic-hero-copy > *:nth-child(3){animation-delay:.16s}
.ic-hero-copy > *:nth-child(4){animation-delay:.24s}
@keyframes ic-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ic-eyebrow{display:flex;align-items:center;gap:12px;letter-spacing:.24em;text-transform:uppercase;font-size:12px;color:var(--ic-turq-lt);margin:0 0 16px}
.ic-eyebrow::before{content:"";width:34px;height:1px;background:var(--ic-turq-lt);flex:none}
.ic-hero h1{font-size:45px;line-height:1.08;letter-spacing:.005em;margin:0 0 20px;color:#fff}
.ic-hero h1 em,.ic-strapline h2 span{font-style:normal;
  background:linear-gradient(100deg,#4FD8CB 0%,#4FD8CB 42%,#A6F4EB 50%,#4FD8CB 58%,#4FD8CB 100%);
  background-size:320% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;animation:ic-shine 9s ease-in-out infinite alternate}
@keyframes ic-shine{from{background-position:100% 0}to{background-position:0 0}}
.ic-hero-lede{color:#C6C6C6;font-size:16.5px;max-width:40ch;margin:0 0 30px}
.ic-ctarow{gap:12px}
.ic-ctarow .wp-block-button__link{min-width:210px;text-align:center;padding:15px 24px}

/* Gallery-wall tiles: Ocean Pearl leads, two beneath. Nothing is cropped. */
.ic-wall{display:grid;grid-template-columns:1.778fr 1fr;gap:14px;align-items:start}
.ic-slot{position:relative;display:block;background:#000;border-radius:10px;overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.55);transition:transform .18s,box-shadow .18s;animation:ic-rise .9s cubic-bezier(.2,.7,.2,1) both}
.ic-slot:nth-child(1){animation-delay:.15s;grid-column:1 / -1;aspect-ratio:1600/963}
.ic-slot:nth-child(2){animation-delay:.3s;aspect-ratio:16/9}
.ic-slot:nth-child(3){animation-delay:.42s;aspect-ratio:1/1}
.ic-slot:hover{transform:translateY(-3px);box-shadow:0 22px 54px rgba(25,179,166,.28)}
.ic-slot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease}
.ic-slot:hover img{transform:scale(1.04)}
.ic-slot .lab{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 11px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.80),rgba(0,0,0,0));display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.ic-slot .n{font-family:var(--ic-serif);font-size:16px;line-height:1.15}
.ic-slot:nth-child(1) .n{font-size:19px}
.ic-slot .n small{display:block;font-family:var(--ic-sans);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ic-turq-lt);margin-top:4px}
.ic-slot .p{font-size:14.5px;white-space:nowrap}
.ic-slot .sku{position:absolute;top:11px;left:11px;background:var(--ic-coral);color:var(--ic-ink);
  font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;padding:4px 9px;border-radius:2px}

/* ---------- Strapline over the tide ---------- */
.ic-strapline{position:relative;overflow:hidden;text-align:center;color:#fff;margin:0;padding:70px var(--ic-gutter) 96px;
  background:linear-gradient(180deg,#0B0B0B 0%,#081312 62%,#07201E 100%)}
.ic-strapline h2{position:relative;z-index:2;font-size:34px;line-height:1.28;max-width:22ch;margin:0 auto}
.ic-orn{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 16px}
.ic-orn i{display:block;width:84px;height:1px;background:linear-gradient(90deg,transparent,rgba(79,216,203,.6))}
.ic-orn i:last-child{transform:scaleX(-1)}
.ic-orn img{height:58px;width:auto;display:block;filter:drop-shadow(0 0 14px rgba(79,216,203,.35))}
.ic-tide{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px;z-index:1;overflow:hidden;
  transform-origin:bottom;animation:ic-swell 9s ease-in-out infinite alternate}
.ic-tide .w{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;will-change:transform}
.ic-tide .w1{animation:ic-drift 46s linear infinite}
.ic-tide .w2{animation:ic-drift 70s linear infinite reverse}
.ic-tide .w3{animation:ic-drift 30s linear infinite}
.ic-tide .w1 .f{fill:rgba(25,179,166,.10)}
.ic-tide .w2 .f{fill:rgba(25,179,166,.09)}
.ic-tide .w3 .f{fill:rgba(79,216,203,.08)}
.ic-tide .l{fill:none;stroke:rgba(79,216,203,.34);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ic-tide .w2 .l{stroke:rgba(79,216,203,.20)}
.ic-tide .w3 .l{stroke:none}
@keyframes ic-drift{to{transform:translateX(-50%)}}
@keyframes ic-swell{from{transform:scaleY(.9)}to{transform:scaleY(1.12)}}

/* ---------- Category tiles ---------- */
.ic-cats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;text-align:left}
.ic-cat{color:var(--ic-tx) !important}
.ic-cat .im{display:block;aspect-ratio:4/3;overflow:hidden;background:#101010}
.ic-cat .im img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ic-cat:hover .im img{transform:scale(1.06)}
.ic-cat .tx{padding:15px 18px 18px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ic-cat b{font-family:var(--ic-serif);font-weight:400;font-size:18px}
.ic-cat small{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px;color:var(--ic-coral-lt);white-space:nowrap}

/* Featured grid reuses the shop cards; just spacing here */
.ic-featured{padding-top:4px}
.ic-featured ul.products{margin-top:34px !important;text-align:left}
.ic-more{margin-top:36px;justify-content:center}

/* ---------- Story (home + about) ---------- */
.ic-story .ic-row{gap:84px !important;align-items:center}
.ic-story h2{font-size:34px;margin:0 0 14px}
.ic-story p{color:var(--ic-tx-2);font-size:15px;margin:0 0 13px;max-width:30rem}
.ic-cap{font-family:var(--ic-serif);font-style:italic;color:var(--ic-turq-lt) !important;font-size:16px;margin-top:6px}
.ic-collage{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ic-collage figure{margin:0;border-radius:10px;overflow:hidden;background:#101010;box-shadow:0 16px 38px rgba(0,0,0,.6);transition:transform .3s ease}
.ic-collage figure:hover{transform:translateY(-3px)}
.ic-collage img{width:100%;height:100%;object-fit:cover;display:block}
.ic-collage .main{grid-column:1 / -1;aspect-ratio:3/2}
.ic-collage .sm{aspect-ratio:1/1}
.ic-collage::before,.ic-collage::after{content:"";position:absolute;width:76px;height:76px;pointer-events:none;z-index:1}
.ic-collage::before{top:-14px;right:-14px;border-top:1.5px solid var(--ic-turq-lt);border-right:1.5px solid var(--ic-turq-lt);border-top-right-radius:14px}
.ic-collage::after{bottom:-14px;left:-14px;border-bottom:1.5px solid var(--ic-coral);border-left:1.5px solid var(--ic-coral);border-bottom-left-radius:14px}
.ic-storycta{margin-top:24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ic-featured-in{display:flex;align-items:center;gap:16px;padding-left:26px;border-left:1px solid rgba(79,216,203,.28);color:var(--ic-tx) !important}
.ic-featured-in img{width:66px;height:auto;display:block;border-radius:3px;border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 26px rgba(0,0,0,.65);transform:rotate(-4deg);transition:transform .35s ease,box-shadow .35s ease}
.ic-featured-in:hover img{transform:rotate(0) scale(1.07);box-shadow:0 16px 34px rgba(25,179,166,.30)}
.ic-featured-in span{display:block;line-height:1.3}
.ic-featured-in small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ic-coral-lt);margin-bottom:5px}
.ic-featured-in b{display:block;font-family:var(--ic-serif);font-weight:400;font-size:17px}
.ic-featured-in em{display:block;font-style:italic;font-size:12.5px;color:var(--ic-tx-2);margin-top:3px}
.ic-ph{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 20px 46px rgba(0,0,0,.7)}
.ic-ph img{width:100%;height:380px;object-fit:cover;display:block}
.ic-facetop img{object-position:50% 6%}

/* ---------- Trust row ---------- */
.ic-trust{gap:24px !important;text-align:center}
.ic-t p{margin:0}
.ic-ic{width:54px;height:54px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;color:var(--ic-turq-lt);
  background:linear-gradient(#0C2422,#0C2422) padding-box,linear-gradient(135deg,var(--ic-turq-lt),rgba(224,131,107,.9)) border-box;border:1.5px solid transparent;
  transition:transform .25s ease,box-shadow .25s ease}
.ic-t:hover .ic-ic{transform:translateY(-3px);box-shadow:0 0 0 6px rgba(79,216,203,.10)}
.ic-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ic-t-b{font-family:var(--ic-serif);font-size:16px;color:var(--ic-tx);margin-bottom:5px !important}
.ic-t-s{font-size:12.5px;color:var(--ic-tx-2)}

/* ---------- About ---------- */
.ic-banner-glow{background-image:radial-gradient(ellipse 50% 120% at 50% 0%,rgba(25,179,166,.16),rgba(0,0,0,0) 70%)}
.ic-pull{background:#000;padding:72px var(--ic-gutter);text-align:center;border-top:1px solid #1C1C1C;border-bottom:1px solid #1C1C1C;margin:0}
.ic-pull .wp-block-quote{border:0;margin:0 auto;padding:0;max-width:28ch}
.ic-pull .wp-block-quote p{font-family:var(--ic-serif);font-style:italic;font-size:30px;line-height:1.35;color:#fff;margin:0}
.ic-pull .wp-block-quote p::before{content:"\201C";display:block;font-size:64px;line-height:.6;color:var(--ic-turq-lt);margin-bottom:14px}
.ic-pull cite{display:block;margin-top:18px;font-style:normal;letter-spacing:.18em;text-transform:uppercase;font-size:12px;color:var(--ic-turq-lt)}
.ic-h2c{font-size:30px;margin:0 0 8px}
.ic-lede2{color:#bdbdbd;max-width:62ch;font-size:15px}
.ic-tl{gap:0 !important;margin-top:30px !important;border-top:2px solid var(--ic-turq-d)}
.ic-st{padding:20px 20px 0 0;position:relative}
.ic-st::before{content:"";position:absolute;top:-8px;left:0;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--ic-turq)}
.ic-st p{font-size:14px;color:#bdbdbd;line-height:1.55;margin:0}
.ic-yr{font-family:var(--ic-serif);font-size:24px !important;color:var(--ic-turq-lt) !important;margin-bottom:6px !important}
.ic-st.is-now .ic-yr{color:var(--ic-coral) !important}
.ic-st.is-now::before{border-color:var(--ic-coral);background:var(--ic-coral)}
.ic-snaps{gap:14px !important;margin-top:26px !important}
.ic-snaps .wp-block-image{border-radius:10px;overflow:hidden;background:#101010;aspect-ratio:4/3}
.ic-snaps .wp-block-image img{width:100%;height:100% !important;object-fit:cover}
.ic-snaps .wp-block-image figcaption{font-size:12px !important;color:#eee !important;padding:22px 12px 9px !important;
  background:linear-gradient(transparent,rgba(0,0,0,.75)) !important;text-align:left !important;margin:0 !important}
.ic-pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.ic-piece{color:#fff !important}
.ic-piece .im{display:block;aspect-ratio:1/1;background:#0d0d0d;overflow:hidden}
.ic-piece img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ic-piece:hover img{transform:scale(1.05)}
.ic-piece .nm{display:block;padding:12px 14px;font-family:var(--ic-serif);font-size:16px}
.ic-pieces + .ic-more{justify-content:flex-start;margin-top:24px}
.ic-feat{background:var(--ic-s1);border:1px solid var(--ic-edge);border-radius:14px;padding:30px;gap:40px !important}
.ic-feat img{border-radius:6px;box-shadow:0 16px 40px rgba(0,0,0,.7)}
.ic-k{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--ic-turq-lt);margin:0 0 10px}
.ic-feat h3{font-size:26px;margin:0 0 6px}
.ic-pub{color:#bdbdbd;margin:0 0 14px}
.ic-q{font-family:var(--ic-serif);font-style:italic;color:#e8e8e8;font-size:17px;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:920px){
  .ic-herogrid{grid-template-columns:1fr;gap:34px;padding:44px var(--ic-gutter) 50px}
  .ic-hero h1{font-size:36px}
  .ic-hero::before{width:380px;height:380px;right:-140px}
  .ic-hero::after{display:none}
  .ic-wall{grid-template-columns:1fr;gap:12px}
  .ic-slot:nth-child(n){grid-column:1 / -1}
  .ic-slot .lab{flex-direction:column;align-items:flex-start;gap:1px;padding:24px 11px 9px}
  .ic-ctarow .wp-block-button{flex:1}
  .ic-ctarow .wp-block-button__link{min-width:0;width:100%}
  .ic-strapline{padding:48px 22px 78px}
  .ic-strapline h2{font-size:26px}
  .ic-tide{height:110px}
  .ic-orn i{width:48px}
  .ic-cats{grid-template-columns:repeat(2,1fr);gap:14px}
  .ic-cat .tx{display:block;padding:12px 14px 14px}
  .ic-cat b{display:block;font-size:16px;margin-bottom:3px}
  .ic-story .ic-row{gap:34px !important}
  .ic-story p{max-width:none}
  .ic-story h2,.ic-title{font-size:28px}
  .ic-collage::before{right:-8px;top:-8px}
  .ic-collage::after{left:-8px;bottom:-8px}
  .ic-featured-in{padding-left:0;border-left:0;width:100%}
  .ic-trust{display:grid !important;grid-template-columns:repeat(2,1fr)}
  .ic-tl{display:grid !important;grid-template-columns:1fr 1fr;row-gap:26px}
  .ic-pull .wp-block-quote p{font-size:23px}
  .ic-pieces{grid-template-columns:1fr 1fr}
  .ic-feat{padding:22px}
  .ic-feat .wp-block-column:first-child{max-width:220px}
}
/* Phones: vertical timeline, line down the left, dot beside each year (dots overlapped text before). */
@media (max-width:520px){
  .ic-tl{grid-template-columns:1fr;row-gap:24px;border-top:0;border-left:2px solid var(--ic-turq-d);margin-left:7px !important}
  .ic-st{padding:0 0 0 24px}
  .ic-st::before{top:7px;left:-9px}
}
@media (prefers-reduced-motion:reduce){
  .ic-hero::before,.ic-hero::after,.ic-hero h1 em,.ic-strapline h2 span,.ic-hero-copy > *,.ic-slot,.ic-tide,.ic-tide .w{animation:none !important}
}

/* ---------- 11/12 preview fixes: the global img{height:auto} was beating these ---------- */
body.ic-v2 .ic-orn img{height:58px;width:auto}
body.ic-v2 .ic-collage img,body.ic-v2 .ic-slot img,body.ic-v2 .ic-cat .im img,body.ic-v2 .ic-piece img{height:100%}
body.ic-v2 .ic-ph img{height:380px}
body.ic-v2 .ic-story .ic-kicker{color:var(--ic-coral-lt)}
@media (max-width:920px){ body.ic-v2 .ic-ph img{height:300px} }