/* =========================================================
   anand.design — shared stylesheet
   Design-tool-native visual system: dot-grid canvas,
   numbered "frames", mono metadata, coral + selection-blue.
   ========================================================= */

:root{
  --canvas-bg:#EAEAEE;
  --dot:#CFD0D6;
  --ink:#15161B;
  --paper:#FFFFFF;
  --muted:#6B6D78;
  --line:#D8D9DE;
  --accent:#FF5C33;
  --accent-soft:#FFE9E1;
  --select:#0D99FF;
  --select-soft:#E5F4FF;
  --ok:#2FBE6E;
  --yellow:#FFC93C;
  --yellow-soft:#FFF3D1;
  --purple:#8B5CF6;
  --purple-soft:#EFE7FE;
  --green:#2FBE6E;
  --green-soft:#E3F9EC;
}
html,
body,
a,
button,
input,
textarea,
select,
label,
[role="button"]{

    cursor:none !important;

}
*{box-sizing:border-box;}
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--canvas-bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  background-image:radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size:26px 26px;
  background-position:-6px -6px;
}
::selection{ background:var(--select-soft); color:var(--ink); }
a{ color:inherit; }
img{ max-width:100%; display:block; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* ---------- custom cursor (desktop only) ---------- */
@media (hover:hover) and (pointer:fine){
  body{ cursor:none; }
  .my-cursor{
    position:fixed; top:0; left:0; transform:none !important; z-index:9999;
    pointer-events:none; will-change:transform;
    display:flex; align-items:flex-start; gap:6px;
  }
  .my-cursor svg{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
  .my-tag{
    margin-top:14px; background:var(--select); color:#fff;
    font-family:'JetBrains Mono',monospace; font-size:10px;
    padding:2px 7px; border-radius:3px 8px 8px 8px; white-space:nowrap;
  }
}
@media not all and (hover:hover){ .my-cursor, .ghost-cursor{ display:none; } }

.ghost-cursor{
  position:fixed; top:0; left:0; z-index:40;
  display:flex; align-items:flex-start; gap:6px; pointer-events:none;
  animation:roam 24s ease-in-out infinite;
}
.ghost-cursor svg{ filter:drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.ghost-tag{
  margin-top:14px; background:var(--accent); color:#fff;
  font-family:'JetBrains Mono',monospace; font-size:10px;
  padding:2px 7px; border-radius:3px 8px 8px 8px; white-space:nowrap;
}
@keyframes roam{
  0%   { top:18%;  left:82%; }
  16%  { top:18%;  left:82%; }
  24%  { top:52%;  left:14%; }
  40%  { top:52%;  left:14%; }
  48%  { top:74%;  left:60%; }
  64%  { top:74%;  left:60%; }
  72%  { top:34%;  left:44%; }
  88%  { top:34%;  left:44%; }
  100% { top:18%;  left:82%; }
}
@media (prefers-reduced-motion: reduce){ .ghost-cursor{ animation:none; } }

/* ---------- top file bar (tab-like page identity) ---------- */
.filebar{
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; background:rgba(234,234,238,.78); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted);
}
.filebar a{ text-decoration:none; }
.filebar .path b{ color:var(--ink); font-weight:500; }
.filebar .status{ display:flex; align-items:center; gap:6px; }
.filebar .status .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }

/* ---------- HUD ---------- */
.hud{
  position:fixed; bottom:20px; z-index:60;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  background:rgba(255,255,255,.75); backdrop-filter:blur(6px);
  padding:6px 10px; border-radius:6px; border:1px solid var(--line);
}
.hud-left{ left:20px; } .hud-right{ right:20px; }
@media (max-width:760px){ .hud{ display:none; } }

/* ---------- bottom toolbar (site-wide nav) ---------- */
.toolbar{
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:90; display:flex; align-items:center; gap:2px; max-width:94vw;
  background:var(--paper); border:1px solid var(--line); border-radius:14px;
  padding:6px; box-shadow:0 10px 30px rgba(20,20,30,.12); overflow-x:auto;
}
.tool{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; padding:8px 13px 6px; border-radius:10px;
  color:var(--muted); font-family:'JetBrains Mono',monospace; font-size:10px;
  transition:background .15s ease, color .15s ease; white-space:nowrap;
}
.tool svg{ width:18px; height:18px; stroke:currentColor; }
.tool:hover{ background:var(--select-soft); color:var(--select); }
.tool.active{ background:var(--ink); color:#fff; }
.tool:focus-visible{ outline:2px solid var(--select); outline-offset:2px; }
.tool-divider{ width:1px; height:26px; background:var(--line); margin:0 2px; flex-shrink:0; }

/* ---------- layout / frame system ---------- */
main{ padding:64px 24px 220px; max-width:1180px; margin:0 auto; position:relative; }
.frame-wrap{ position:relative; margin-bottom:130px; }
.frame-wrap:last-child{ margin-bottom:60px; }
.frame-tag{
  position:absolute; top:-30px; left:0; display:flex; gap:10px; align-items:baseline;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); opacity:.85;
}
.frame-tag .fname{ color:var(--ink); font-weight:500; }
.frame-tag .swatch{ width:9px; height:9px; border-radius:2px; display:inline-block; box-shadow:0 0 0 1px rgba(0,0,0,.06); }
.frame-wrap.active .frame-tag,
.frame-wrap.active .frame-tag .fname{ color:var(--select); }
.frame{
  position:relative; background:var(--paper);
  border:1.5px dashed var(--line); border-radius:4px; padding:56px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.frame-wrap.active .frame{
  border-style:solid; border-color:var(--select);
  box-shadow:0 0 0 4px var(--select-soft);
}
.handle{
  position:absolute; width:8px; height:8px; background:var(--select);
  border:1.5px solid #fff; border-radius:1px; opacity:0; transition:opacity .3s ease; z-index:5;
}
.frame-wrap.active .handle{ opacity:1; }
.h-tl{ top:-5px; left:-5px; } .h-tr{ top:-5px; right:-5px; }
.h-bl{ bottom:-5px; left:-5px; } .h-br{ bottom:-5px; right:-5px; }

@media (max-width:720px){
  main{ padding:48px 14px 200px; }
  .frame{ padding:32px 20px; }
}

/* ---------- type ---------- */
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; margin:0; letter-spacing:-.01em; }
p{ margin:0; line-height:1.6; color:var(--muted); }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--muted);
  border:1px solid var(--line); padding:5px 12px; border-radius:20px; margin-bottom:26px;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--ok); }
.section-head{ margin-bottom:34px; }
.section-head .kicker{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent); }
.section-head h2{ font-size:clamp(24px,3vw,32px); margin-top:8px; }

/* ---------- buttons ---------- */
.btn{
  font-family:'Inter',sans-serif; font-weight:600; font-size:14px;
  padding:13px 22px; border-radius:8px; border:1.5px solid transparent;
  cursor:none; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .15s ease, box-shadow .15s ease; background:none;
}
.btn:hover{ transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--select); outline-offset:2px; }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(255,92,51,.28); }
.btn-secondary{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-secondary:hover{ border-color:var(--ink); }

/* ---------- chips / tags ---------- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  font-size:13px; font-weight:500; padding:7px 14px; border-radius:7px;
  background:var(--canvas-bg); border:1px solid var(--line); color:var(--ink);
}
.chip.filled{ background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.toggle{ --chip-color:var(--ink); --chip-soft:var(--canvas-bg); cursor:none; user-select:none;
  color:var(--chip-color); background:var(--chip-soft); border:1.5px solid var(--chip-color);
  transition:background .15s ease, color .15s ease, transform .1s ease; }
.chip.toggle:hover{ transform:translateY(-1px); }
.chip.toggle.filled{ background:var(--chip-color); color:#fff; }
.mini-tag{
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted);
  border:1px solid var(--line); padding:2px 8px; border-radius:12px;
}
.mini-tag.coral{ background:var(--accent-soft); color:var(--accent); border-color:var(--accent); }
.mini-tag.blue{ background:var(--select-soft); color:var(--select); border-color:var(--select); }
.mini-tag.yellow{ background:var(--yellow-soft); color:#8A6400; border-color:var(--yellow); }
.mini-tag.green{ background:var(--green-soft); color:#1C8A50; border-color:var(--green); }
.mini-tag.purple{ background:var(--purple-soft); color:var(--purple); border-color:var(--purple); }

/* ---------- Figma-style stickers ---------- */
.sticker-tape{
  position:absolute; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700;
  padding:7px 16px; color:var(--ink); box-shadow:0 6px 14px rgba(20,20,30,.14); z-index:8;
  letter-spacing:.04em; text-transform:uppercase; pointer-events:none;
}
.sticker-emoji{
  position:absolute; width:44px; height:44px; border-radius:50%; background:var(--paper);
  border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:20px; box-shadow:0 8px 18px rgba(20,20,30,.14); z-index:8; pointer-events:none;
}
.sticker-star{ position:absolute; z-index:8; pointer-events:none; filter:drop-shadow(0 4px 8px rgba(20,20,30,.12)); }
.sticker-arrow{ position:absolute; z-index:6; pointer-events:none; }
.sticker-badge{
  position:absolute; z-index:8; pointer-events:none; font-family:'JetBrains Mono',monospace;
  font-size:10.5px; font-weight:700; color:#fff; padding:6px 12px; border-radius:20px;
  box-shadow:0 8px 18px rgba(20,20,30,.16); display:flex; align-items:center; gap:5px;
}
.scribble-underline{ position:absolute; left:0; bottom:-6px; z-index:-1; pointer-events:none; }
.word-highlight{ position:relative; display:inline-block; }
@media (max-width:760px){
  .sticker-tape, .sticker-emoji, .sticker-star, .sticker-arrow, .sticker-badge{ display:none; }
}

/* ---------- work cards ---------- */
.projects{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:60px 40px;
}

@media(max-width:900px){
    .projects{
        grid-template-columns:1fr;
    }
}

.project{
    display:block;
    text-decoration:none;
    color:inherit;
}

.project-image{
    position:relative;
    aspect-ratio:16/10;
    overflow:hidden;
    border-radius:18px;
    background:#f2f2f2;
}

.project-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s ease;
}

.project:hover .project-image img{
    transform:scale(1.05);
}

.project-info{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:18px;
}

.project-type{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.08em;
    margin-bottom:6px;
}

.project h3{
    font-size:30px;
    margin:0;
}

.project-link{
    opacity:.55;
    transition:.25s;
}

.project:hover .project-link{
    opacity:1;
    transform:translateX(6px);
}
/* ---------- case-study metadata row ---------- */
.meta-row{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
}
@media (min-width:700px){ .meta-row{ grid-template-columns:repeat(4,1fr); } }
.meta-item .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); margin-bottom:6px; letter-spacing:.03em; text-transform:uppercase; }
.meta-item .v{ font-size:14.5px; font-weight:600; }

.gallery-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:10px; }
@media (min-width:700px){ .gallery-grid{ grid-template-columns:1fr 1fr; } }
.gallery-tile{
  border-radius:8px; height:220px; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.gallery-tile .dims{
  position:absolute; bottom:10px; left:12px; font-family:'JetBrains Mono',monospace; font-size:10px;
  color:rgba(255,255,255,.85); background:rgba(0,0,0,.28); padding:3px 8px; border-radius:4px;
}

.prevnext{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.pn-link{
  flex:1; min-width:220px; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  text-decoration:none; color:inherit; transition:border-color .15s ease, background .15s ease;
}
.pn-link:hover{ border-color:var(--select); background:var(--select-soft); }
.pn-link .k{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); margin-bottom:6px; }
.pn-link .v{ font-weight:600; font-size:16px; }

/* ---------- process list ---------- */
.process-list{ display:flex; flex-direction:column; gap:22px; }
.process-item{ display:grid; grid-template-columns:52px 1fr; gap:18px; }
.process-item .pnum{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
  border:1px solid var(--accent-soft); background:var(--accent-soft); border-radius:6px;
  height:32px; display:flex; align-items:center; justify-content:center;
}
.process-item h3{ font-size:16.5px; margin-bottom:6px; }
.process-item p{ font-size:14px; }

/* ---------- forms ---------- */
.form-grid{ display:grid; gap:16px; max-width:520px; }
.field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-bottom:7px; }
.field input, .field textarea{
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid var(--line);
  font-family:'Inter',sans-serif; font-size:14px; background:var(--canvas-bg); color:var(--ink);
  resize:vertical;
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--select); outline-offset:1px; background:#fff; }

.contact-links{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }
.link-pill{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px;
  padding:14px 18px; text-decoration:none; color:var(--ink); font-weight:500; font-size:14px;
  transition:border-color .15s ease, background .15s ease;
}
.link-pill:hover{ border-color:var(--select); background:var(--select-soft); }
.link-pill .lp-icon{ width:20px; height:20px; }
.link-pill small{ display:block; font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--muted); font-weight:400; }

/* ---------- accordion (shared) ---------- */
.accordion{ width:100%; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item:first-child{ border-top:1px solid var(--line); }
.acc-head{
  width:100%; background:none; border:none; text-align:left; padding:16px 2px;
  display:flex; justify-content:space-between; align-items:center; cursor:none;
  font-weight:600; font-size:14.5px; color:var(--ink); font-family:'Inter',sans-serif;
}
.acc-head .pnum{
  font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; height:28px; width:28px;
  display:inline-flex; align-items:center; justify-content:center; margin-right:14px; flex-shrink:0;
}
.acc-head-text{ display:flex; align-items:center; flex:1; }
.acc-head svg{ width:14px; height:14px; transition:transform .2s ease; flex-shrink:0; stroke:var(--muted); }
.acc-item.open .acc-head svg{ transform:rotate(45deg); stroke:var(--select); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.acc-item.open .acc-body{ max-height:160px; }
.acc-body p{ padding:0 2px 18px 42px; font-size:13.5px; }

/* ---------- avatar / photo tilt (shared) ---------- */
.avatar-wrap{ perspective:900px; width:150px; height:150px; flex-shrink:0; position:relative; transform:rotate(-3deg); }
.avatar{
  width:150px; height:150px; border-radius:20px; overflow:hidden; position:relative;
  border:1px solid var(--line); box-shadow:0 14px 34px rgba(20,20,30,.14);
  transition:transform .12s ease-out; transform-style:preserve-3d;
}
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar-badge{
  position:absolute; bottom:-10px; right:-10px; background:var(--paper);
  border:1px solid var(--line); border-radius:20px; padding:5px 10px 5px 8px;
  display:flex; align-items:center; gap:5px; font-family:'JetBrains Mono',monospace;
  font-size:10px; color:var(--ink); box-shadow:0 6px 16px rgba(20,20,30,.12);
}
.avatar-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- magnetic button (shared) ---------- */
.magnetic-btn{
  background:var(--ink); color:#fff; border:none; border-radius:10px;
  padding:15px 26px; font-weight:600; font-size:13.5px; cursor:none;
  transition:transform .12s ease-out; font-family:'Inter',sans-serif;
}

/* ---------- color palette (stickers / accents) ---------- */
:root{
  --violet:#8B5CF6; --violet-soft:#F0E9FF;
  --yellow:#F5B400; --yellow-soft:#FFF4D6;
  --green:#12B886;  --green-soft:#DEFBF1;
  --pink:#FF598F;   --pink-soft:#FFE3EC;
}

/* pastel section washes (semi-transparent so the dot-grid still reads through) */
.wash-yellow{ background:linear-gradient(180deg, rgba(245,180,0,.12) 0%, rgba(245,180,0,0) 60%); }
.wash-violet{ background:linear-gradient(180deg, rgba(139,92,246,.12) 0%, rgba(139,92,246,0) 60%); }
.wash-green{  background:linear-gradient(180deg, rgba(18,184,134,.12) 0%, rgba(18,184,134,0) 60%); }
.wash-pink{   background:linear-gradient(180deg, rgba(255,89,143,.12) 0%, rgba(255,89,143,0) 60%); }

/* ---------- stickers ---------- */
.sticker{
  position:absolute; display:inline-flex; align-items:center; gap:6px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px;
  padding:8px 15px; border-radius:30px; border:1.5px dashed currentColor;
  transform:rotate(var(--r,-6deg)); z-index:6; white-space:nowrap;
  box-shadow:0 8px 18px rgba(20,20,30,.08); pointer-events:none;
}
.sticker-yellow{ background:var(--yellow-soft); color:#8a6d00; }
.sticker-violet{ background:var(--violet-soft); color:#6b3fd6; }
.sticker-green{  background:var(--green-soft);  color:#0f9d72; }
.sticker-pink{   background:var(--pink-soft);   color:#d6316f; }
.sticker-coral{  background:var(--accent-soft); color:var(--accent); }
.sticker-blue{   background:var(--select-soft); color:var(--select); }

.blob{ position:absolute; z-index:1; filter:blur(1px); opacity:.55; pointer-events:none; }

/* washi tape (used to "pin" the photo) */
.tape{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-4deg);
  width:74px; height:24px; z-index:7;
  background:repeating-linear-gradient(45deg, var(--accent) 0 7px, #ffd2c2 7px 14px);
  opacity:.9; box-shadow:0 3px 6px rgba(0,0,0,.12); border-radius:2px;
}

/* service card accent bands (color-coded per service) */
.svc-card.acc-yellow{ border-top:3px solid var(--yellow); }
.svc-card.acc-violet{ border-top:3px solid var(--violet); }
.svc-card.acc-green{  border-top:3px solid var(--green); }
.svc-card.acc-coral{  border-top:3px solid var(--accent); }
.svc-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
}
.svc-icon.acc-yellow{ background:var(--yellow-soft); }
.svc-icon.acc-violet{ background:var(--violet-soft); }
.svc-icon.acc-green{  background:var(--green-soft); }
.svc-icon.acc-coral{  background:var(--accent-soft); }

/* colorful chip variants for skills */
.chip.c-violet.filled{ background:var(--violet); border-color:var(--violet); color:#fff; }
.chip.c-yellow.filled{ background:var(--yellow); border-color:var(--yellow); color:#4a3800; }
.chip.c-green.filled{  background:var(--green);  border-color:var(--green);  color:#fff; }
.chip.c-pink.filled{   background:var(--pink);   border-color:var(--pink);   color:#fff; }
.chip.c-blue.filled{   background:var(--select); border-color:var(--select); color:#fff; }

footer{ text-align:center; padding:26px 0 130px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }


/* ==========================================
   SERVICES V2
==========================================*/

.services{

    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:50px;

}

.service{

    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;

    min-height:170px;

    padding:40px 42px;

    background:white;

    border:1px solid var(--line);

    border-radius:18px;

    overflow:hidden;

    transition:

        min-height .55s cubic-bezier(.22,1,.36,1),

        box-shadow .35s,

        background .35s,

        border-color .35s,

        transform .35s;

}

.service:hover{

    min-height:470px;

    border-color:var(--select);

    background:var(--select-soft);
    
    transform:translateY(-4px);

    box-shadow:0 25px 60px rgba(13,153,255,.12);

}

.service-content{

    width:36%;

    position:relative;

    z-index:2;

}

.service-number{

    display:inline-block;

    font-family:'JetBrains Mono',monospace;

    font-size:12px;

    color:var(--muted);

    margin-bottom:16px;

}

.service h3{

    font-size:34px;

    margin:0;

    transition:.35s;

}

.service p{

    margin-top:14px;

    max-width:340px;

    font-size:15px;

    color:var(--muted);

    line-height:1.6;

}

.service-tags{

      display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin-top:24px;

    transition:.35s;

}

.service-tags span{

        padding:8px 14px;

    border-radius:999px;

    border:1px solid var(--line);

    background:white;

    transition:.25s;

    font-size:11px;

    font-family:'JetBrains Mono',monospace;

}
.service:hover .service-tags span{

    background:#fff;

    border-color:#0D99FF;

    color:#0D99FF;

}

.service:hover h3{

     transform:  translateY(-4px)
     scale(1.03);

}

.service:hover p{

    transform:translateY(-4px);

}

.service:hover .service-tags{

    transform:translateY(-6px);

}
/* ==========================================
   FIGMA FILE PREVIEW
==========================================*/

.service-files{

     position:absolute;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    width:620px;

    height:360px;

    pointer-events:none;

}

/* ---------------- FILE ---------------- */

.fig-file{

    position:absolute;

    width:250px;
    height: 210PX;
    


    background:#fff;

    border:2px solid transparent;

    border-radius:12px;

    overflow:hidden;

    opacity:0;

    box-shadow:

    0 8px 14px rgba(0,0,0,.05),

    0 20px 40px rgba(0,0,0,.08);

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* blue selection */

.service:hover .fig-file{

    border-color:#0D99FF;
     
    box-shadow:

    0 20px 35px rgba(13,153,255,.12),

    0 35px 80px rgba(0,0,0,.18);

}

/* ---------------- HEADER ---------------- */

.fig-head{

      display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 12px;

    background:#F5FAFF;

    border-bottom:1px solid #D8EBFF;

    font-size:10px;

    font-family:'JetBrains Mono',monospace;

    border-radius:10px 10px 0 0;
    transition:.3s;

    

}
.service:hover .fig-head{

    background:#EDF7FF;

}

.fig-head span{

    font-weight:600;

}

.fig-head small{

    opacity:.55;

}

/* ---------------- IMAGE ---------------- */

.fig-file img{

   width:calc(100% - 16px);

    margin:8px;

    height:160px;
    border-radius: 8PX;

    object-fit:cover;

    object-position:top;
    display:block;
    transition:.5s;


}
.service:hover .fig-file img{

    transform:scale(1.04);

}
/* ---------------- HANDLES ---------------- */

.fig-file::before,

.fig-file::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    background:#0D99FF;

    border:2px solid white;

    border-radius:50%;

    opacity:0;

    transition:.3s;

}

.fig-file::before{

    top:-5px;

    left:-5px;

}

.fig-file::after{

    bottom:-5px;

    right:-5px;

}

.service:hover .fig-file::before,

.service:hover .fig-file::after{

    opacity:1;

}
/* ===============================
   DEFAULT FILE POSITIONS
================================*/

.file1,
.file2,
.file3{

    left:150px;
    top:60px;

    opacity:0;

    transform:scale(.82);

}

/* ===============================
   HOVER ANIMATION
================================*/

.service:hover .file1{

    opacity:1;

    transform:
        translate(-160px,-80px)
        rotate(-4deg);

    transition-delay:0s;

}

.service:hover .file2{

    opacity:1;

    transform:
        translate(0,-20px)
        rotate(0deg);

    transition-delay:.08s;

}

.service:hover .file3{

    opacity:1;

    transform:
        translate(160px,45px)
        rotate(4deg);

    transition-delay:.16s;

}
/* ==========================================
   PART 4 — FIGMA DETAILS
==========================================*/

.fig-file{

    overflow:visible;

}

.fig-file::before,
.fig-file::after{

    z-index:20;

}

/* top-left handle */

.fig-file .tl{

    position:absolute;
    width:8px;
    height:8px;

    top:-5px;
    left:-5px;

    background:#0D99FF;
    border:2px solid white;
    border-radius:50%;

}

/* top-right */

.fig-file .tr{

    position:absolute;
    width:8px;
    height:8px;

    top:-5px;
    right:-5px;

    background:#0D99FF;
    border:2px solid white;
    border-radius:50%;

}

/* bottom-left */

.fig-file .bl{

    position:absolute;
    width:8px;
    height:8px;

    bottom:-5px;
    left:-5px;

    background:#0D99FF;
    border:2px solid white;
    border-radius:50%;

}

/* bottom-right */

.fig-file .br{

    position:absolute;
    width:8px;
    height:8px;

    bottom:-5px;
    right:-5px;

    background:#0D99FF;
    border:2px solid white;
    border-radius:50%;

}

.fig-file{

    box-shadow:
    0 8px 18px rgba(0,0,0,.08),
    0 30px 70px rgba(0,0,0,.12);

}

.service:hover .fig-file{

    box-shadow:
    0 12px 22px rgba(13,153,255,.15),
    0 35px 80px rgba(0,0,0,.18);

}
.fig-meta{

    position:absolute;

    top:38px;

    right:10px;

    padding:5px 8px;

    border-radius:20px;

    background:#0D99FF;

    color:white;

    font-size:9px;

    font-family:'JetBrains Mono',monospace;

    z-index:5;

}
.service:hover .fig-file{

    transform-origin:center;

}

.service:hover .file1{

    z-index:3;

}

.service:hover .file2{

    z-index:2;

}

.service:hover .file3{

    z-index:1;

}
.service::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(13,153,255,.08),

    transparent 55%);

    opacity:0;

    transition:.4s;

}
.service:hover::before{

    opacity:1;

}
.service p{

    transition:.35s;

}
.service:hover p{

    color:#4d5562;

}
.service-status{

    font-size:11px;

    font-family:'JetBrains Mono',monospace;

    color:#0D99FF;

    margin-bottom:14px;

    opacity:0;

    transform:translateY(6px);

    transition:.3s;

}

.service:hover .service-status{

    opacity:1;

    transform:none;

}

html,
body,
*,
*::before,
*::after,
*:hover,
*:active,
*:focus{
    cursor:none !important;
}

/* =====================================
CASE STUDY DECK
===================================== */

.case-deck{

    

    display:flex;

    flex-direction:column;

    

}

.deck-slide{

    width:100%;

}

.deck-slide img,

.deck-slide video{

    width:100%;

    display:block;

    border-radius:8px;

    border:1px solid var(--line);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.deck-slide video{

    pointer-events:none;

}
.deck-slide{

    transition:.35s;

}

.deck-slide:hover{

    transform:translateY(-6px);

}

.deck-slide:hover img{

    outline:2px solid #0d99ff;

    outline-offset:10px;

}
/* ==========================
CASE NAVIGATION
========================== */

.case-nav{

    width:min(980px, calc(100vw - 120px));

    margin:80px auto 140px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.case-nav a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--ink);

    font-family:'JetBrains Mono', monospace;

    font-size:14px;

    padding:12px 18px;

    border:1px solid var(--line);

    border-radius:999px;

    transition:.25s ease;

}

.case-nav a:hover{

    border-color:var(--select);

    color:var(--select);

    transform:translateY(-2px);

}

/* ======================================
   SERVICES MOBILE
====================================== */

@media (max-width:768px){

.service{

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    padding:32px 22px;

    min-height:auto;

    gap:28px;

}

.service-content{

    width:100%;

}

.service h3{

    font-size:52px;
    line-height:.92;
    margin:12px 0 18px;

}

.service p{

    max-width:100%;
    font-size:18px;
    line-height:1.55;

}

.service-tags{

    margin-top:20px;

}

/* ---------- Preview Area ---------- */

.service-files{

    position:relative;

    width:100%;

    height:240px;

    right:auto;
    top:auto;

    transform:none;

    margin-top:10px;

}

/* ---------- All Frames ---------- */

.service-files .fig-file{

    opacity:1;

    width:200px;

    height:170px;

    border-color:#0D99FF;

    box-shadow:
        0 12px 24px rgba(0,0,0,.10),
        0 25px 60px rgba(0,0,0,.12);

}

/* ---------- Featured Frame ---------- */

.service-files .file2{

    left:50%;
    top:0;

    transform:
        translateX(-50%)
        rotate(2deg);

    z-index:3;

}

/* ---------- Back Frame ---------- */

.service-files .file1{

    left:15px;
    top:28px;

    transform:
        rotate(-7deg)
        scale(.9);

    opacity:.65;

    z-index:2;

}

/* ---------- Front Frame ---------- */

.service-files .file3{

    right:15px;
    left:auto;

    top:45px;

    transform:
        rotate(8deg)
        scale(.9);

    opacity:.65;

    z-index:1;

}

/* ---------- Image ---------- */

.fig-file img{

    height:118px;

}

}
.service-files .file2{

    transform:
        translateX(-50%)
        rotate(2deg)
        scale(1.04);

}
/* Mobile / touch devices */
@media (max-width:768px){

.service:hover .file1{

    left:15px;
    top:28px;
    transform:rotate(-7deg) scale(.9);

}

.service:hover .file2{

    left:50%;
    top:0;
    transform:translateX(-50%) rotate(2deg);

}

.service:hover .file3{

    right:15px;
    left:auto;
    top:45px;
    transform:rotate(8deg) scale(.9);

}

}


Case study

/* ===========================
CASE SECTION
=========================== */

.case-section{

    width:min(1080px,90%);
    margin:140px auto;

}

.section-label{

    font-family:var(--mono);
    font-size:13px;
    color:var(--muted);
    margin-bottom:28px;

}

.problem-grid{

    display:grid;
    grid-template-columns:2fr 1fr;
    gap:80px;
    align-items:end;
    margin-bottom:80px;

}

.problem-copy h2{

    font-size:68px;
    line-height:.95;
    margin-bottom:18px;

}

.problem-copy h3{

    font-size:34px;
    color:#666;
    font-weight:500;
    margin-bottom:28px;

}

.problem-copy p{

    max-width:650px;
    font-size:20px;
    line-height:1.8;
    color:#555;

}

.problem-highlight{

    border-left:2px solid var(--select);
    padding-left:24px;

}

.problem-highlight .highlight-tag{

    display:inline-block;

    font-family:var(--mono);
    font-size:12px;
    color:var(--select);
    margin-bottom:18px;

}

.problem-highlight p{

    font-size:24px;
    line-height:1.5;

}

.problem-cards{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;

}

.problem-card{

    padding:28px;
    border:1px solid var(--line);
    border-radius:18px;
    transition:.3s;

}

.problem-card:hover{

    border-color:var(--select);
    transform:translateY(-4px);

}

.problem-card span{

    font-family:var(--mono);
    color:var(--muted);
    font-size:12px;

}

.problem-card h4{

    margin:18px 0 14px;
    font-size:26px;

}

.problem-card p{

    color:#666;
    line-height:1.7;

}
/* ===========================
DISCOVERY
=========================== */

.section-intro{

    max-width:760px;
    margin-bottom:80px;

}

.section-intro h2{

    font-size:58px;
    line-height:.95;
    margin-bottom:20px;

}

.section-intro p{

    font-size:20px;
    line-height:1.8;
    color:#666;

}

.research-layout{

    display:grid;
    grid-template-columns:1.5fr .9fr;
    gap:50px;
    align-items:start;
    margin-bottom:100px;

}

.research-board{

    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    background:#fff;

}

.research-board img{

    width:100%;
    display:block;

}

.research-side{

    display:flex;
    flex-direction:column;
    gap:26px;

}

.method{

    padding-bottom:22px;
    border-bottom:1px solid var(--line);

}

.method span{

    font-family:var(--mono);
    color:var(--muted);
    font-size:12px;

}

.method h4{

    margin:12px 0;
    font-size:22px;

}

.method p{

    color:#666;
    line-height:1.7;

}

.insights{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;

}

.insight{

    padding:32px;
    border-left:2px solid var(--select);

}

.insight span{

    font-family:var(--mono);
    color:var(--muted);
    font-size:12px;

}

.insight h3{

    margin:18px 0;
    font-size:30px;
    line-height:1.1;

}

.insight p{

    color:#666;
    line-height:1.7;

}
/* ===========================
DESIGN PRINCIPLES
=========================== */

.principles-intro{

    max-width:760px;

    margin-bottom:90px;

}

.principles-intro h2{

    font-size:72px;

    line-height:.9;

    margin-bottom:24px;

}

.principles-intro p{

    font-size:20px;

    color:#666;

    line-height:1.8;

}

.principles{

    display:flex;

    flex-direction:column;

}

.principle{

    display:grid;

    grid-template-columns:170px 1fr;

    gap:70px;

    padding:55px 0;

    border-top:1px solid var(--line);

    transition:.35s;

}

.principle:last-child{

    border-bottom:1px solid var(--line);

}

.principle-number{

    font-size:78px;

    font-weight:700;

    color:#E6E6E6;

    transition:.35s;

}

.principle-content h3{

    font-size:38px;

    margin-bottom:16px;

}

.principle-content p{

    max-width:720px;

    font-size:19px;

    line-height:1.8;

    color:#666;

}

.principle:hover{

    padding-left:18px;

}

.principle:hover .principle-number{

    color:var(--select);

}
.principles-visual{

    margin-top:80px;

    border:1px solid var(--line);

    border-radius:22px;

    overflow:hidden;

    background:#fff;

}

.principles-visual img{

    display:block;

    width:100%;

}
/* ================= HERO ================= */

.case-hero{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:80px;

    margin-bottom:90px;

}

.hero-copy{

    max-width:760px;

}

.hero-label{

    display:inline-block;

    font-family:var(--mono);

    font-size:13px;

    color:var(--muted);

    margin-bottom:18px;

}

.hero-copy h1{

    font-size:92px;

    line-height:.9;

    margin-bottom:26px;

}

.hero-description{

    font-size:22px;

    line-height:1.8;

    color:#666;

}

.hero-meta{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    gap:26px;

}

.meta{

    border-top:1px solid var(--line);

    padding-top:18px;

}

.meta span{

    display:block;

    font-family:var(--mono);

    color:var(--muted);

    font-size:12px;

    margin-bottom:10px;

}

.meta p{

    line-height:1.7;

}
/* ===========================
FINAL SOLUTION
=========================== */

.solution-intro{

    max-width:760px;

    margin-bottom:100px;

}

.solution-intro h2{

    font-size:64px;

    line-height:.92;

    margin-bottom:24px;

}

.solution-intro p{

    font-size:20px;

    color:#666;

    line-height:1.8;

}

.feature-row{

    display:grid;

    grid-template-columns:1fr 1.25fr;

    gap:80px;

    align-items:center;

    margin-bottom:140px;

}

.feature-row.reverse{

    grid-template-columns:1.25fr 1fr;

}

.feature-copy{

    max-width:480px;

}

.feature-label{

    display:block;

    font-family:var(--mono);

    color:var(--muted);

    font-size:12px;

    margin-bottom:18px;

}

.feature-copy h3{

    font-size:44px;

    line-height:1;

    margin-bottom:20px;

}

.feature-copy p{

    color:#666;

    font-size:19px;

    line-height:1.8;

}

.feature-preview{

    background:#fff;

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

}

.feature-preview img{

    width:100%;

    display:block;

}

.feature-preview:hover{

    transform:translateY(-8px);

    border-color:var(--select);

    box-shadow:0 30px 70px rgba(0,0,0,.08);

}
/* ===========================
DESIGN DECISIONS
=========================== */

.decision-intro{

    max-width:760px;

    margin-bottom:90px;

}

.decision-intro h2{

    font-size:64px;

    line-height:.95;

    margin-bottom:24px;

}

.decision-intro p{

    color:#666;

    font-size:20px;

    line-height:1.8;

}

.decision{

    display:grid;

    grid-template-columns:1.3fr .8fr;

    gap:70px;

    align-items:center;

    margin-bottom:120px;

}

.decision.reverse{

    grid-template-columns:.8fr 1.3fr;

}

.decision-image{

    position:relative;

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}

.decision-image img{

    width:100%;

    display:block;

}

.decision-copy h3{

    font-size:42px;

    margin:14px 0 28px;

}

.decision-copy h4{

    margin:20px 0 10px;

    font-size:18px;

}

.decision-copy p{

    color:#666;

    line-height:1.8;

}

.decision-number{

    font-family:var(--mono);

    color:var(--muted);

}
.annotation{

    position:absolute;

    background:#fff;

    border:1px solid var(--select);

    color:var(--select);

    padding:10px 16px;

    border-radius:999px;

    font-size:12px;

    font-family:var(--mono);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.a1{

    top:22%;

    left:12%;

}

.a2{

    right:8%;

    top:52%;

}

.a3{

    bottom:18%;

    left:50%;

    transform:translateX(-50%);

}
/* ======================================
PROCESS
====================================== */

.process-intro{

    max-width:760px;
    margin-bottom:90px;

}

.process-intro h2{

    font-size:64px;
    line-height:.95;
    margin-bottom:24px;

}

.process-intro p{

    font-size:20px;
    color:#666;
    line-height:1.8;

}

.timeline{

    position:relative;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

}

.timeline-line{

    position:absolute;

    top:16px;

    left:0;

    width:100%;

    height:2px;

    background:var(--line);

}

.timeline-step{

    position:relative;

    padding-top:50px;

}

.timeline-step::before{

    content:"";

    position:absolute;

    top:8px;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#fff;

    border:2px solid var(--line);

}

.timeline-step.active::before{

    border-color:var(--select);

    background:var(--select);

}

.timeline-step span{

    font-family:var(--mono);

    color:var(--muted);

    font-size:12px;

}

.timeline-step h4{

    margin:12px 0;

    font-size:24px;

}

.timeline-step p{

    color:#666;

    line-height:1.7;

}



/* ======================================
CONSTRAINTS
====================================== */

.constraints{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.constraint{

    padding:34px;

    border:1px solid var(--line);

    border-radius:18px;

}

.constraint span{

    font-family:var(--mono);

    color:var(--muted);

}

.constraint h3{

    margin:18px 0;

    font-size:30px;

}

.constraint p{

    color:#666;

    line-height:1.8;

}



/* ======================================
IMPACT
====================================== */

.impact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

.impact{

    padding:40px;

    border-top:2px solid var(--select);

}

.impact h2{

    font-size:70px;

    margin-bottom:18px;

}

.impact h3{

    font-size:30px;

    line-height:1.2;

}
/* ===========================
REFLECTION
=========================== */

.reflection-section{

    margin-top:180px;

}
.reflection-quote{

    margin-bottom:100px;

}

.reflection-quote h2{

    font-size:88px;

    line-height:.92;

    max-width:1000px;

}

.reflection-quote span{

    display:block;

    color:var(--select);

    margin-top:18px;

}

.reflection-quotes{

    margin-bottom:100px;

}

.reflection-quotes h2{

    font-size:88px;

    line-height:.92;

    max-width:1000px;

}

.reflection-quotes span{

    display:block;

    color:#C1EF00;

    margin-top:18px;

}

.reflection-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}

.reflection-copy h2{

    
    font-size:88px;

    line-height:.92;

    max-width:1000px;


}
.reflection-copy span{
    display:block;

    color:#C83100;

    margin-top:18px;
}

.reflection-copy p{

    font-size:19px;

    line-height:1.9;

    color:#666;

}



/* ===========================
NEXT PROJECT
=========================== */

.next-project{

    margin-top:200px;

    border-top:1px solid var(--line);

    padding-top:80px;

}

.next-label{

    font-family:var(--mono);

    color:var(--muted);

    margin-bottom:30px;

}

.next-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    color:inherit;

    padding:40px 0;

    transition:.35s;

}

.next-card h2{

    font-size:64px;

    margin:16px 0;

}

.next-card p{

    max-width:520px;

    color:#666;

    line-height:1.8;

}

.next-arrow{

    font-size:90px;

    color:var(--select);

    transition:.35s;

}

.next-card:hover{

    transform:translateX(12px);

}

.next-card:hover .next-arrow{

    transform:translateX(18px);

}
/* HERO SHOWCASE */

.hero-showcase{

    margin:90px 0 140px;

    background:#fff;

    border:1px solid var(--line);

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 30px 80px rgba(0,0,0,.05);

}

.hero-showcase img{

    width:100%;

    display:block;

}
/* ===========================
BRAND STORY
=========================== */

.brand-story{

    display:grid;

    grid-template-columns:.9fr 1.2fr;

    gap:80px;

    align-items:center;

}

.brand-copy h2{

    font-size:64px;

    line-height:.92;

    margin-bottom:28px;

}

.brand-copy p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.brand-moodboard{

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}

.brand-moodboard img{

    width:100%;

    display:block;

}
.strategy-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.strategy-card{

    padding:40px;

    border:1px solid var(--line);

    border-radius:20px;

    background:#fff;

}
.strategy-card:hover{

    border-color:#C83100;
    transform:translateY(-4px);

}


.strategy-card span{

    font-family:var(--mono);

    color:var(--muted);

}

.strategy-card h3{

    margin-top:18px;

    font-size:38px;

    line-height:1.15;

}
.identity-gallery{

    display:grid;

    grid-template-columns:2fr 1fr;

    grid-template-rows:330px 330px;

    gap:24px;

}

.identity-gallery img{
    width:100%;
    height:100%;
    object-fit:contain;
}
/* Primary Logo */

.identity-large{

    grid-column:1;
    grid-row:1 / span 2;

    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    
}

/* Submark + Secondary */

.identity-small{

    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    
}

/* Mascot */

.identity-wide{

    grid-column:1 / 3;

    min-height:500px;

    border:1px solid var(--line);
    border-radius:22px;
    background:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

   
}
.identity-large{
    background:#C93800;
    overflow:hidden;
}

.identity-small{
    overflow:hidden;
}

.identity-small:nth-of-type(2){
    background:#C93800;
}

.identity-small:nth-of-type(3){
    background:#FFD83B;
}

.identity-wide{
    background:#FFD83B;
    min-height:420px;
    overflow:hidden;
}

/* Individual logo scales */


/* ================= VISUAL LANGUAGE ================= */

.visual-intro{

    max-width:760px;
    margin-bottom:70px;

}

.visual-intro h2{

    font-size:64px;
    line-height:.95;

}

.visual-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;

}

.visual-card{

    border:1px solid var(--line);
    border-radius:22px;
    overflow:hidden;
    background:#fff;

}

.visual-card img{

    width:100%;
    display:block;

}

.visual-card.wide{

    grid-column:1/3;

}
/* ================= APPLICATIONS ================= */

.application{

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:70px;

    align-items:center;

    margin-bottom:140px;

}

.application.reverse{

    grid-template-columns:1.2fr .8fr;

}

.app-copy span{

    font-family:var(--mono);

    color:var(--muted);

}

.app-copy h2{

    margin-top:20px;

    font-size:52px;

    line-height:.95;

}

.app-image{

    border-radius:24px;

    overflow:hidden;

    border:1px solid var(--line);

}
.app-image :hover{
    transform:translateY(-8px);

    border-color:red;

    box-shadow:0 30px 70px rgba(0,0,0,.08);
}

.app-image img{

    width:100%;

    display:block;

}

.context-gallery{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.context-gallery img{

    width:100%;

    display:block;

    border-radius:20px;

    border:1px solid var(--line);

}
/* ================= BRAND IDENTITY ================= */

.identity-intro{

    max-width:760px;

    margin-bottom:90px;

}

.identity-intro h2{

    font-size:60px;

    line-height:.95;

    margin-bottom:24px;

}

.identity-intro p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.identity-block{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:120px;

}

.identity-block.reverse{

    grid-template-columns:1fr 420px;

}

.identity-copy span{

    display:block;

    margin-bottom:18px;

    font-family:var(--mono);

    color:#888;

}

.identity-copy h3{

    font-size:42px;

    line-height:1.15;

}

.identity-preview{

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}

.identity-preview img{

    display:block;

    width:100%;

}
/* ================= RESEARCH ================= */

.research-intro{

    max-width:760px;

    margin-bottom:70px;

}

.research-intro h2{

    font-size:58px;

    line-height:.95;

    margin-bottom:24px;

}

.research-intro p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.research-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

.research-card{

    padding:42px;

    border:1px solid var(--line);

    border-radius:22px;

    background:#fff;

}
.research-card:hover{

    border-color:#D673CF;
    transform:translateY(-4px);

}

.research-card span{

    display:inline-block;

    font-family:var(--mono);

    color:#999;

    margin-bottom:18px;

}

.research-card h3{

    font-size:34px;

    margin-bottom:20px;

}

.research-card p{

    color:#666;

    line-height:1.8;

}

.research-card ul{

    margin-top:10px;

    padding-left:20px;

}

.research-card li{

    margin-bottom:12px;

    color:#666;

}
/* ================= ARCHITECTURE ================= */

.architecture-intro{

    max-width:760px;

    margin-bottom:70px;

}

.architecture-intro h2{

    font-size:58px;

    line-height:.95;

    margin-bottom:22px;

}

.architecture-intro p{

    color:#666;

    line-height:1.8;

    font-size:20px;

}

.flow{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:22px;

}

.flow-card{

    width:100%;

    max-width:900px;

    padding:34px 42px;

    border:1px solid var(--line);

    border-radius:22px;

    background:#fff;

}
.flow-card:hover {
    transform: translateY(-4px);
}

.flow-card span{

    font-family:var(--mono);

    color:#999;

}
.flow-card:hover span{

    color:#D673CF;

}
.flow-card:hover h3{

    color:#D673CF;

}

.flow-card h3{

    margin:12px 0;

    font-size:34px;

}

.flow-card p{

    color:#666;

    line-height:1.7;

}

.flow-arrow{

    font-size:34px;

    color:#999;

}
/* ================= EXPERIENCE ================= */

.experience-intro{

    max-width:760px;

    margin-bottom:80px;

}

.experience-intro h2{

    font-size:60px;

    line-height:.95;

    margin-bottom:24px;

}

.experience-intro p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.experience-block{

    display:grid;

    grid-template-columns:430px 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:120px;

}

.experience-block.reverse{

    grid-template-columns:1fr 430px;

}

.experience-copy span{

    display:block;

    margin-bottom:16px;

    color:#888;

    font-family:var(--mono);

}

.experience-copy h3{

    font-size:44px;

    line-height:1.15;

    margin-bottom:20px;

}

.experience-copy p{

    font-size:18px;

    line-height:1.8;

    color:#666;

}

.experience-preview{

    overflow:hidden;

    border-radius:24px;

    border:1px solid var(--line);

}

.experience-preview img{

    width:100%;

    display:block;

}
/* ================= PRODUCT SHOWCASE ================= */

.showcase-intro{

    max-width:720px;

    margin-bottom:70px;

}

.showcase-intro h2{

    font-size:60px;

    line-height:.95;

    margin-bottom:22px;

}

.showcase-intro p{

    color:#666;

    font-size:20px;

    line-height:1.8;

}

.showcase-large{

    margin-bottom:40px;

    border:1px solid var(--line);

    border-radius:26px;

    overflow:hidden;

}

.showcase-large img{

    width:100%;

    display:block;

}

.showcase-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;

    margin-bottom:40px;

}

.showcase-grid img{

    width:100%;

    border-radius:22px;

    border:1px solid var(--line);

}

.showcase-three{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.showcase-three img{

    width:100%;

    border-radius:20px;

    border:1px solid var(--line);

}
/* ================= FINAL EXPERIENCE ================= */

.experience-summary{

    max-width:760px;

    margin-bottom:60px;

}

.experience-summary h2{

    font-size:60px;

    line-height:.95;

    margin-bottom:24px;

}

.experience-summary p{

    font-size:20px;

    line-height:1.8;

    color:#666;

}

.website-preview{

    border:1px solid var(--line);

    border-radius:26px;

    overflow:hidden;

    background:#fff;

}

.website-preview video{

    width:100%;

    display:block;

}
.case-section{

    margin-bottom: 25px;

}
.project-link{

    display:inline-flex;

    align-items:center;

    margin-top:36px;

    padding:10px 18px;

    border:1px solid var(--line);

    border-radius:999px;

    text-decoration:none;

    font-family:var(--mono);

    font-size:13px;

    color:var(--text);

    transition:.3s;

}

.project-link:hover{

    background:var(--select);

    color:#fff;

    border-color:var(--select);

}
.problem-car{

    border:1px solid var(--line);

    border-radius:22px;

    padding:40px;

    transition:.35s;

}

.problem-car span{

    font-size:12px;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.08em;

}

.problem-car h3{

    margin-top:20px;

    font-size:32px;

    line-height:1.35;

    font-weight:600;

}

.problem-car:hover{

    transform:translateY(-5px);

    border-color:#FF5AC4;

}
.discover-intro{

    max-width:760px;

    margin-bottom:70px;

}

.discover-intro h2{

    font-size:58px;

    line-height:1.08;

    margin-bottom:24px;

}

.discover-intro p{

    max-width:620px;

    color:var(--muted);

    line-height:1.8;

}

.research-grid{

    display:grid;

    grid-template-columns:1fr 1.4fr;

    gap:32px;

}

.research-car{

    border:1px solid var(--line);

    border-radius:24px;

    padding:38px;

    transition:.35s;

}

.research-car:hover{

    transform:translateY(-5px);

    border-color:#FF5AC4;

}

.research-car span{

    font-size:12px;

    color:var(--muted);

    text-transform:uppercase;

    letter-spacing:.08em;

}

.research-car h3{

    margin-top:24px;

    font-size:44px;

    line-height:1.2;

}

.placeholder-box{

    margin-top:25px;

    height:360px;

    border:2px dashed #d7d7d7;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#9a9a9a;

    font-size:16px;

    background:#fafafa;

}
/* ================= VISUAL IDENTITY ================= */

.identity-intro{

    max-width:760px;

    margin-bottom:70px;

}

.identity-intro h2{

    font-size:58px;

    line-height:1.08;

    margin-bottom:22px;

}

.identity-intro p{

    max-width:620px;

    color:var(--muted);

    line-height:1.8;

}

.identity-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

}

.identity-card{

    border:1px solid var(--line);

    border-radius:22px;

    overflow:hidden;

    background:#fff;

}

.identity-large{

    min-height:520px;

}

.identity-wide{

    grid-column:1/-1;

    min-height:300px;

}

.identity-card .placeholder-box{

    width:100%;
    height:100%;

    min-height:300px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8f8f8;

    color:#8a8a8a;

    font-size:18px;

}

.identity-large .placeholder-box{

    min-height:520px;

}
/* ================= WEBSITE ================= */

.website-intro{

    max-width:760px;

    margin-bottom:70px;

}

.website-intro h2{

    font-size:58px;

    line-height:1.08;

    margin-bottom:22px;

}

.website-intro p{

    max-width:640px;

    color:var(--muted);

    line-height:1.8;

}

.website-preview{

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}

.website-placeholder{

    aspect-ratio:16/9;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#f7f7f7,#ececec);

    color:#8a8a8a;

    font-size:18px;

    font-weight:500;

}
.website-preview video{

    width:100%;

    display:block;

}
/* ================= PACKAGING ================= */

.packaging-intro{

    max-width:760px;

    margin-bottom:70px;

}

.packaging-intro h2{

    font-size:58px;

    line-height:1.08;

    margin-bottom:24px;

}

.packaging-intro p{

    max-width:640px;

    color:var(--muted);

    line-height:1.8;

}

.packaging-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:24px;

}

.packaging-large{

    grid-row:span 2;

    min-height:700px;
    
  height: 100%;
    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}

.packaging-small{

    min-height:338px;

    border:1px solid var(--line);

    border-radius:24px;

    overflow:hidden;

    background:#fff;

}
.packaging-large img,
.packaging-small img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}

.application-placeholder{

    min-height:520px;

    border:1px solid var(--line);

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f7f7f7;

    color:#999;

    font-size:18px;

    overflow:hidden;

    transition:.35s;

}

.application-placeholder:hover{

    transform:translateY(-6px);

    box-shadow:0 24px 60px rgba(0,0,0,.06);

}
/* ================= DECISION PLACEHOLDER ================= */

.decision-placeholder{

    width:100%;
    min-height:560px;

    display:flex;
    justify-content:center;
    align-items:center;

    border:1px solid var(--line);
    border-radius:24px;

    background:#f7f7f7;

    color:#9a9a9a;

    font-size:18px;

}