/* =========================================================
   Docked Co-Living — Case Study
   Colors  #E46554  #EA816F  #475E66  #76A2B1
   Titles  DM Serif Display · Text  Fira Sans
   Designed on a 1440px canvas
   ========================================================= */

:root{
  --red:      #E46554;
  --salmon:   #EA816F;
  --deep:     #475E66;
  --blue:     #76A2B1;
  --statbox:  #F4C4BB;
  --videobox: #D9D9D9;

  --ink:      #2E2E2E;
  --page-bg:  #FFF5F2;

  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --sub:   "Inclusive Sans", "Helvetica Neue", Arial, sans-serif;
  --text:  "Fira Sans", "Helvetica Neue", Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--text);
  color:var(--ink);
  background-color:var(--page-bg);
  background-image:url("assets/bg-pattern.png");
  background-position:top center;
  background-size:1440px auto;
  background-repeat:repeat;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }

/* ---------- shared type ---------- */
.dk-h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:58px;
  line-height:1.06;
  color:var(--blue);
  margin:0 0 16px;
}
.dk-h2--center{ text-align:center; margin-bottom:14px; }

.dk-body,
.dk-goal p,
.dk-solutions p,
.dk-activation p,
.dk-digital p,
.dk-results p{
  font-family:var(--text);
  font-size:19px;
  line-height:24px;
  color:var(--ink);
}

/* section shells — widths taken from the design */
.dk-shell{ margin:0 auto; max-width:calc(100% - 48px); }


/* =========================================================
   HERO
   ========================================================= */
.dk-hero{ line-height:0; }
.dk-hero img{ width:100%; height:auto; }


/* =========================================================
   INTRO
   ========================================================= */
.dk-intro{
  width:930px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:66px 0 0;
  text-align:center;
}
.dk-intro p{ font-size:19px; line-height:24px; }


/* =========================================================
   THREE PHOTOS
   ========================================================= */
.dk-photos{
  width:1279px; max-width:calc(100% - 48px);
  margin:69px auto 0;
  display:grid;
  grid-template-columns:397fr 391fr 396fr;
  gap:47px;
}
.dk-photos img{ width:100%; height:auto; }


/* =========================================================
   MY ROLE & CONTRIBUTION
   ========================================================= */
.dk-role{
  width:1113px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:45px 0 0;
  text-align:center;
}
.dk-role .dk-lead{
  max-width:1062px;
  margin:0 auto;
  font-size:19px;
  line-height:24px;
}

.dk-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:84px;
  margin-top:74px;
}
.dk-stats li{
  background:var(--statbox);
  border-radius:8px;
  min-height:266px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px 12px;
}
.dk-stat__num{
  font-family:var(--serif);
  font-weight:400;
  font-size:90px;
  line-height:1;
  color:#111;
  letter-spacing:-.01em;
}
.dk-stat__lab{
  font-family:var(--text);
  font-size:26px;
  line-height:31px;
  color:#111;
  margin-top:22px;
  text-align:center;
}


/* =========================================================
   GOAL
   ========================================================= */
.dk-goal{
  width:1317px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:100px 0 0;
  display:grid;
  grid-template-columns:458fr 817fr;
  justify-content:space-between;
  column-gap:42px;
  align-items:center;
}
.dk-goal__text{ padding-right:10px; }
.dk-goal img{ width:100%; height:auto; }


/* =========================================================
   DEVICE MOCKUPS  (full bleed)
   ========================================================= */
.dk-devices{ margin-top:72px; line-height:0; }
.dk-devices img{ width:100%; height:auto; }


/* =========================================================
   SOLUTIONS
   ========================================================= */
.dk-solutions{
  width:1261px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:86px 0 0;
  display:grid;
  grid-template-columns:463fr 527fr;
  justify-content:space-between;
  column-gap:60px;
  align-items:center;
}
.dk-solutions p + p{ margin-top:22px; }
.dk-solutions img{ width:100%; height:auto; }

/* colour palette — drawn live so it stays crisp at any size */
.dk-swatches{
  display:flex;
  justify-content:center;
  gap:16px;
  margin:0 0 38px;
}
.dk-swatches li{
  width:82px; height:82px;
  border-radius:50%;
  flex:0 1 82px;
  aspect-ratio:1;
}


/* =========================================================
   FLYER SLIDER
   ========================================================= */
.dk-slider{
  position:relative;
  margin:0 auto;
  padding:167px 0 0;
  width:100%;
}
.dk-slider__viewport{ overflow:hidden; width:100%; }

.dk-slider__arrow{
  position:absolute;
  top:calc(167px + 691px / 2);
  transform:translateY(-50%);
  z-index:2;
  width:56px; height:56px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(71,94,102,.18);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--deep);
  cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.dk-slider__arrow:hover{
  background:#fff;
  box-shadow:0 4px 14px rgba(71,94,102,.16);
}
.dk-slider__arrow:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }
.dk-slider__arrow svg{ width:22px; height:22px; display:block; }
.dk-slider__arrow--prev{ left:34px; }
.dk-slider__arrow--next{ right:34px; }
.dk-slider__arrow--prev:hover{ transform:translateY(-50%) translateX(-2px); }
.dk-slider__arrow--next:hover{ transform:translateY(-50%) translateX(2px); }
.dk-slider__track{
  display:flex;
  width:100%;
  transition:transform .7s cubic-bezier(.6,.02,.2,1);
}
.dk-slide{
  flex:0 0 100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:76px;
  padding:0 24px;
}
.dk-slide img{
  height:691px;
  width:auto;
  max-width:none;
  object-fit:contain;
}
.dk-slider__dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:26px;
}
.dk-slider__dots button{
  width:10px; height:10px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#C9CFD1;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.dk-slider__dots button:hover{ transform:scale(1.15); }
.dk-slider__dots button.is-active{ background:var(--blue); }
@media (prefers-reduced-motion: reduce){
  .dk-slider__track{ transition:none; }
}


/* =========================================================
   BRAND ACTIVATION
   ========================================================= */
.dk-activation{
  width:1297px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:60px 0 0;
  display:grid;
  grid-template-columns:502fr 793fr;
  column-gap:2px;
  align-items:center;
}
.dk-activation__text{ padding-right:26px; }
.dk-activation p + p{ margin-top:24px; }
.dk-activation strong{ font-weight:700; }
.dk-activation img{ width:100%; height:auto; }


/* =========================================================
   SOCIAL POSTS
   ========================================================= */
.dk-posts{
  width:1367px; max-width:calc(100% - 32px);
  margin:0 auto;
  padding:69px 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:17px;
}
.dk-posts img{ width:100%; height:auto; }


/* =========================================================
   DIGITAL MARKETING
   ========================================================= */
.dk-digital{
  width:1295px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:97px 0 0;
  display:grid;
  grid-template-columns:492fr 715fr;
  justify-content:space-between;
  column-gap:88px;
  align-items:center;
}
.dk-digital p + p{ margin-top:22px; }
.dk-digital img{ width:100%; height:auto; }


/* =========================================================
   NOTES + SOCIAL EXECUTION
   ========================================================= */
.dk-note{
  width:995px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:136px 0 0;
  text-align:center;
}
.dk-note p{ font-size:19px; line-height:24px; }
.dk-note--narrow{ width:520px; padding-top:44px; }
.dk-note--narrow p{ font-size:16px; line-height:22px; color:#6A6A6A; }

.dk-refer{
  width:1297px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:73px 0 0;
  display:grid;
  grid-template-columns:306fr 27fr 306fr 51fr 272fr 29fr 306fr;
  gap:0;
  align-items:end;
}
.dk-refer img{ width:100%; height:auto; }
.dk-refer img:nth-of-type(1){ grid-column:1; }
.dk-refer img:nth-of-type(2){ grid-column:3; }
.dk-refer img:nth-of-type(3){ grid-column:5; }
.dk-refer img:nth-of-type(4){ grid-column:7; }

.dk-props{
  width:1305px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:117px 0 0;
  display:grid;
  grid-template-columns:331fr 560fr 362fr;
  gap:26px;
  align-items:center;
}
.dk-props img{ width:100%; height:auto; }


/* =========================================================
   VIDEO
   ========================================================= */
.dk-video{
  width:1250px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:88px 0 0;
}
.dk-video__box{
  position:relative;
  background:var(--videobox);
  aspect-ratio:1250 / 681;
  overflow:hidden;
}
.dk-video__box::after{
  content:"";
  position:absolute; inset:0;
  background:rgba(41,52,56,.22);
  pointer-events:none;
  transition:opacity .25s ease;
}
.dk-video__box.is-playing::after{ opacity:0; }
.dk-video__box video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.dk-video__box.is-playing video{ object-fit:contain; background:#000; }
.dk-video__play{
  position:absolute; inset:0;
  margin:auto;
  width:96px; height:96px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  transition:transform .2s ease;
}
.dk-video__play svg{ width:100%; height:100%; display:block; }
.dk-video__play:hover{ transform:scale(1.06); }
.dk-video__box.is-playing .dk-video__play{ display:none; }


/* =========================================================
   RESULTS
   ========================================================= */
.dk-results{
  width:1229px; max-width:calc(100% - 48px);
  margin:0 auto;
  padding:102px 0 0;
  display:grid;
  grid-template-columns:454fr 315fr 315fr;
  column-gap:72px;
  align-items:center;
}
.dk-results__text{ padding-right:10px; }
.dk-stats--results{
  display:contents;
}
.dk-stats--results li{ margin:0; }


/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .dk-h2{ font-size:46px; }
  .dk-stat__num{ font-size:70px; }
  .dk-stat__lab{ font-size:21px; line-height:26px; margin-top:16px; }
  .dk-stats li{ min-height:210px; }
  .dk-stats{ gap:40px; }
  .dk-slide img{ height:520px; }
  .dk-goal, .dk-solutions, .dk-activation, .dk-digital{ column-gap:40px; }
}

@media (max-width:900px){
  .dk-h2{ font-size:38px; }
  .dk-intro{ padding-top:36px; }
  .dk-intro p, .dk-role .dk-lead, .dk-note p,
  .dk-goal p, .dk-solutions p, .dk-activation p, .dk-digital p, .dk-results p{
    font-size:16px; line-height:22px;
  }

  .dk-photos{ margin-top:44px; gap:16px; }
  .dk-role{ padding-top:34px; }
  .dk-stats{ gap:16px; margin-top:44px; }
  .dk-stats li{ min-height:150px; border-radius:6px; }
  .dk-stat__num{ font-size:46px; }
  .dk-stat__lab{ font-size:15px; line-height:19px; margin-top:10px; }

  .dk-goal, .dk-solutions, .dk-activation, .dk-digital{
    grid-template-columns:1fr;
    row-gap:28px;
    padding-top:64px;
  }
  .dk-goal__text, .dk-activation__text, .dk-results__text{ padding-right:0; }
  .dk-devices{ margin-top:64px; }

  .dk-slider{ padding-top:64px; }
  .dk-slide{ gap:16px; padding:0 16px; }
  .dk-slide img{ height:auto; width:calc(50% - 8px); }
  .dk-slider__arrow{
    top:auto; bottom:-4px; transform:none;
    width:42px; height:42px;
  }
  .dk-slider__arrow svg{ width:17px; height:17px; }
  .dk-slider__arrow--prev{ left:12px; }
  .dk-slider__arrow--next{ right:12px; }
  .dk-slider__arrow--prev:hover,
  .dk-slider__arrow--next:hover{ transform:none; }
  .dk-swatches{ gap:10px; margin-bottom:24px; }
  .dk-swatches li{ width:48px; height:48px; flex:0 1 48px; }

  .dk-posts{ grid-template-columns:repeat(2,1fr); gap:14px; padding-top:48px; }
  .dk-note{ padding-top:52px; }
  .dk-refer{ grid-template-columns:repeat(2,1fr); gap:20px; padding-top:48px; }
  .dk-refer img:nth-of-type(n){ grid-column:auto; }
  .dk-props{ grid-template-columns:1fr; gap:20px; padding-top:64px; }
  .dk-video{ padding-top:64px; }
  .dk-video__play{ width:66px; height:66px; }

  .dk-results{
    grid-template-columns:1fr 1fr;
    row-gap:26px;
    column-gap:16px;
    padding:64px 0 64px;
  }
  .dk-results__text{ grid-column:1 / -1; }
}

@media (max-width:560px){
  .dk-photos{ grid-template-columns:1fr; gap:14px; }
  .dk-stats{ grid-template-columns:1fr; }
  .dk-refer{ grid-template-columns:1fr; }
}


/* =========================================================
   BACK LINKS
   ========================================================= */
.dk-back{
  position:absolute;
  top:30px; left:40px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 20px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--deep);
  font-family:var(--text);
  font-size:15px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.dk-back:hover{ background:#fff; transform:translateX(-2px); }
.dk-back:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.dk-about{
  position:absolute;
  top:30px; right:40px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  padding:11px 22px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:#475E66;
  font-family:var(--text);
  font-size:15px;
  font-weight:500;
  line-height:1;
  letter-spacing:.02em;
  text-decoration:none;
  backdrop-filter:blur(4px);
  transition:background .2s ease, transform .2s ease;
}
.dk-about:hover{ background:#fff; transform:translateY(-1px); }
.dk-about:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

.dk-hero{ position:relative; }

.dk-foot{
  text-align:center;
  padding:74px 0 96px;
}
.dk-foot a{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:14px 30px 15px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-family:var(--text);
  font-size:16px;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  transition:filter .2s ease, transform .2s ease;
}
.dk-foot a:hover{ filter:brightness(.94); transform:translateY(-1px); }
.dk-foot a:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; }

@media (max-width:900px){
  .dk-back{ top:16px; left:16px; font-size:13px; padding:9px 15px 10px; }
  .dk-about{ top:16px; right:16px; font-size:13px; padding:9px 16px 10px; }
  .dk-foot{ padding:48px 0 64px; }
}