/*
Theme Name: Clevemo
Theme URI: https://clevemo.com/
Author: Srdjan Knezevic (Clevemo)
Author URI: https://clevemo.com/
Description: Friendly, calming brand-identity & logo-design portfolio theme — teal waves, soft circles and editable everything. Manage portfolio works, reviews, FAQ, brand logos, fonts, colors and all homepage texts from the WordPress admin.
Version: 3.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clevemo
*/

/* ============================================================
   Clevemo — TEST design "Wave & Bubble"
   Friendly, rounded, playful — teal waves + amber dots
   (separate from the main clevemo.css; original untouched)
   ============================================================ */

:root{
  --bg:        #ffffff;
  --bg-tint:   #ecf8f8;
  --bg-tint-2: #e0f3f3;
  --ink:       #15302f;
  --ink-soft:  #4f6968;
  --ink-faint: #80938f;
  --line:      #dfeceb;
  --line-soft: #eef5f4;

  --teal:      #34b3b5;
  --accent:    #34b3b5;
  --teal-bright: color-mix(in srgb, var(--teal) 82%, #ffffff);
  --teal-deep: color-mix(in srgb, var(--teal) 80%, #07403f);
  --teal-ink: color-mix(in srgb, var(--teal) 62%, #042726);
  --amber:     #ffc83d;
  --amber-deep: color-mix(in srgb, var(--amber) 84%, #6b3d00);

  --on-teal:   #ffffff;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --gut: clamp(20px, 5vw, 56px);
  --radius: 22px;
  --radius-lg: 30px;

  --shadow-sm: 0 6px 20px -12px rgba(18,80,80,.35);
  --shadow:    0 22px 48px -28px rgba(18,80,80,.42);
  --shadow-lg: 0 34px 70px -30px rgba(18,80,80,.5);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
::selection{ background:var(--teal); color:#fff; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }

/* ---- Eyebrow / labels ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display);
  font-size:13px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--teal-deep);
}
.eyebrow .dot{ color:var(--amber-deep); font-size:10px; line-height:1; }
.rule{ display:inline-block; height:2px; width:46px; background:var(--line); border-radius:2px; }

/* ---- Section scaffolding ---- */
.section{ padding-block:clamp(64px, 9vw, 120px); position:relative; }
.section-head{ max-width:680px; margin-bottom:clamp(36px,5vw,60px); }
.section-head .eyebrow{ margin-bottom:18px; }
.section-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(32px, 4.6vw, 54px);
  line-height:1.08;
  letter-spacing:-0.025em;
  text-wrap:balance;
}
.section-title em, .accent{ font-style:normal; color:var(--teal); }
.section-sub{
  margin-top:18px; font-size:clamp(16px,1.5vw,19px);
  color:var(--ink-soft); max-width:54ch; text-wrap:pretty;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:15px; font-weight:700; letter-spacing:0.005em;
  padding:14px 26px; border-radius:999px;
  transition:transform .35s var(--ease), background .3s, color .3s, box-shadow .3s, border-color .3s;
  will-change:transform;
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 14px 28px -14px rgba(52,179,181,.8); }
.btn-primary:hover{ background:var(--teal-deep); }
.btn-ghost{ background:#fff; color:var(--ink); border:2px solid var(--line); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal-deep); }
.btn-light{ background:var(--amber); color:#3a2c00; box-shadow:0 14px 28px -16px rgba(240,173,18,.9); }
.btn-light:hover{ background:#ffd569; }
.btn-lg{ padding:17px 32px; font-size:16px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--gut);
  transition:background .4s var(--ease), box-shadow .4s, padding .4s;
}
.nav.scrolled{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 8px 30px -22px rgba(18,80,80,.5);
  padding-block:11px;
}
.brand{ display:flex; align-items:center; }
.brand img{ height:46px; width:auto; display:block; }
.footer .brand img{ height:42px; }

.nav-links{ display:flex; align-items:center; gap:32px; }
.nav-links a{
  font-family:var(--font-display);
  font-size:15px; font-weight:600; color:var(--ink-soft);
  position:relative; transition:color .25s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0; border-radius:3px;
  background:var(--amber); transition:width .35s var(--ease);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:14px; }

.nav-toggle{ display:none; width:46px; height:46px; border-radius:50%; border:2px solid var(--line); background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:0 0 auto; transition:border-color .25s; }
.nav-toggle span{ display:block; width:18px; height:2px; background:var(--teal); border-radius:2px; transition:transform .35s var(--ease), opacity .25s; }
.nav.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:880px){
  .nav-toggle{ display:inline-flex; }
  .nav.nav-open{ background:#fff; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; padding:4px var(--gut) 18px;
    max-height:0; overflow:hidden; opacity:0; pointer-events:none;
    box-shadow:0 24px 40px -28px rgba(18,80,80,.5);
    transition:max-height .4s var(--ease), opacity .3s, padding .3s;
  }
  .nav.nav-open .nav-links{ max-height:70vh; opacity:1; pointer-events:auto; }
  .nav-links a{ font-size:18px; padding:15px 2px; border-bottom:1px solid var(--line-soft); }
  .nav-links a::after{ display:none; }
  .nav-cta .btn-primary{ padding:11px 18px; font-size:13.5px; }
}
@media (max-width:430px){ .nav-cta .btn-primary{ padding:10px 15px; font-size:12.5px; } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding-top:clamp(120px, 17vh, 180px);
  padding-bottom:0;
  text-align:center;
  overflow:hidden;
}
/* amber dot grid decoration */
.hero::before{
  content:""; position:absolute; top:96px; left:clamp(16px,4vw,60px);
  width:120px; height:96px; z-index:0;
  background-image:radial-gradient(var(--amber) 2.6px, transparent 2.7px);
  background-size:20px 20px;
  opacity:.85; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; top:140px; right:clamp(16px,4vw,60px);
  width:90px; height:90px; border-radius:50%; z-index:0;
  border:14px solid var(--bg-tint-2); pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:2; }
@media (max-width:600px){ .hero::after{ display:none; } }
.hero-tag{ display:inline-flex; align-items:center; gap:14px; margin-bottom:24px; flex-wrap:wrap; justify-content:center; }
.eyebrow--pill{ background:var(--bg-tint); padding:10px 20px; border-radius:999px; letter-spacing:0.08em; }
.hero h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(38px, 6.6vw, 82px);
  line-height:1.03;
  letter-spacing:-0.035em;
  max-width:15ch; margin-inline:auto;
  text-wrap:balance;
}
.hero h1 em, .hero h1 .accent{ font-style:normal; color:var(--teal); }
.hero-sub{
  max-width:50ch; margin:24px auto 0;
  font-size:clamp(17px,1.6vw,20px); color:var(--ink-soft); text-wrap:pretty;
}
.hero-lower{ display:block; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:30px; }

/* trust row */
.trust{
  margin-top:clamp(34px,5vw,48px);
  display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,56px); align-items:flex-start; justify-content:center;
}
.trust-item{ display:flex; flex-direction:column; gap:3px; align-items:center; }
.trust-item b{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,3vw,38px); letter-spacing:-0.02em; line-height:1; color:var(--ink);
}
.trust-item span{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.trust-stars{ color:var(--amber-deep); }

/* hero bubble band — the signature wave */
.hero-band{
  position:relative; margin-top:clamp(40px,6vw,72px);
  background:var(--teal);
  padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px);
}
/* wave SVGs (inline) */
.wave-svg{ position:absolute; left:0; width:100%; height:62px; display:block; pointer-events:none; }
.wave-top{ top:1px; transform:translateY(-99%); }
.wave-bottom{ bottom:1px; transform:translateY(99%) scaleY(-1); }
.hero-bubbles{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.4vw,34px);
  flex-wrap:wrap; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.bubble{
  border-radius:50%; overflow:hidden; flex:0 0 auto;
  border:6px solid #fff; background:#fff;
  box-shadow:var(--shadow);
}
.bubble img{ width:100%; height:100%; object-fit:cover; }
.bubble--portrait{ width:clamp(150px,20vw,210px); height:clamp(150px,20vw,210px); }
.bubble--a{ width:clamp(96px,12vw,140px); height:clamp(96px,12vw,140px); }
.bubble--b{ width:clamp(110px,14vw,164px); height:clamp(110px,14vw,164px); align-self:flex-end; }
.bubble--c{ width:clamp(84px,11vw,124px); height:clamp(84px,11vw,124px); }
.bubble--dot{
  width:54px; height:54px; border:none; background:var(--amber);
  box-shadow:0 14px 24px -12px rgba(240,173,18,.8); align-self:flex-start;
}
@media (max-width:600px){
  .bubble--c{ display:none; }
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--bg-tint);
  padding-block:clamp(26px,4vw,40px);
  overflow:hidden;
}
.marquee-track{ display:flex; gap:22px; width:max-content; animation:scroll-x 48s linear infinite; }
@media (hover:hover){ .marquee:hover .marquee-track{ animation-play-state:paused; } }
@keyframes scroll-x{ to{ transform:translateX(-50%); } }
.marquee-tile{
  width:118px; height:118px; flex:0 0 auto;
  background:#fff; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; box-shadow:var(--shadow-sm);
}
.marquee-tile img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); opacity:.8; transition:filter .5s, opacity .5s; }
@media (hover:hover){ .marquee:hover .marquee-tile img{ filter:grayscale(0); opacity:1; } }
.marquee.touch-hold .marquee-track{ animation-play-state:paused; }
.marquee.touch-hold .marquee-tile img{ filter:grayscale(0); opacity:1; }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ============================================================
   WORK
   ============================================================ */
.work-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; }
.filters{ display:flex; gap:10px; flex-wrap:wrap; }
.filter{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:14px; font-weight:600;
  padding:10px 20px; border-radius:999px; border:2px solid var(--line);
  color:var(--ink-soft); transition:all .25s; text-decoration:none; cursor:pointer;
}
.filter:hover{ border-color:var(--teal); color:var(--teal-deep); }
.filter.active{ background:var(--teal); color:#fff; border-color:var(--teal); }

.grid{
  margin-top:clamp(34px,5vw,52px);
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px);
}
.card{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--bg-tint); aspect-ratio:1/1;
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card.hide{ display:none; }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card:hover img{ transform:scale(1.05); }
.card-meta{
  position:absolute; inset:auto 0 0 0; padding:20px 20px 18px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  background:linear-gradient(to top, rgba(8,60,60,.9), rgba(8,60,60,0));
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.card:hover .card-meta{ opacity:1; transform:none; }
.card-meta h3{ font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.2; color:#fff; max-width:78%; }
.card-meta .cat{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#bdeced; white-space:nowrap; }
.card .num{
  position:absolute; top:14px; left:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--teal-deep);
  font-family:var(--font-display); font-size:12px; font-weight:800;
  box-shadow:var(--shadow-sm); opacity:0; transform:scale(.8);
  transition:opacity .35s, transform .35s var(--ease);
}
.card:hover .num{ opacity:1; transform:none; }
@media (max-width:820px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .grid{ grid-template-columns:1fr; } }

.work-foot{ margin-top:46px; display:flex; justify-content:center; }
/* Extra works stay hidden until revealed in batches via "See more" — unless filtering by category */
.grid:not(.filtering) .card--extra:not(.shown){ display:none; }
.card--extra.shown{ animation:cardIn .55s var(--ease) both; }
@keyframes cardIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .card--extra.shown{ animation:none; } }

/* ============================================================
   PROCESS  (full teal section, wavy top & bottom)
   ============================================================ */
.process{
  position:relative; background:var(--teal); color:var(--on-teal);
  margin-block:clamp(60px,9vw,110px) clamp(60px,9vw,110px);
  padding-block:clamp(70px,9vw,120px);
}
.process .eyebrow{ color:#d6f5f5; }
.process .eyebrow .dot{ color:var(--amber); }
.process .section-title{ color:#fff; }
.process .section-title em{ color:#fff5db; }
.process .section-sub{ color:rgba(255,255,255,.85); }
.steps{ margin-top:clamp(40px,6vw,64px); display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,24px); }
.step{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius); padding:28px 24px 30px;
  transition:transform .4s var(--ease), background .4s;
}
.step:hover{ transform:translateY(-5px); background:rgba(255,255,255,.16); }
.step-n{ display:inline-block; font-family:var(--font-display); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#0c6566; background:var(--amber); padding:6px 12px; border-radius:999px; }
.step h3{ font-family:var(--font-display); font-weight:800; font-size:22px; margin-top:18px; letter-spacing:-0.01em; color:#fff; }
.step p{ margin-top:12px; font-size:15px; color:rgba(255,255,255,.82); line-height:1.55; }
@media (max-width:880px){ .steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:460px){ .steps{ grid-template-columns:1fr; } }

/* ============================================================
   ABOUT
   ============================================================ */
.about-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(36px,6vw,80px); align-items:center; }
.about-photo{ position:relative; justify-self:center; }
.about-photo .frame{
  width:clamp(240px,30vw,360px); height:clamp(240px,30vw,360px);
  border-radius:50%; overflow:hidden; border:10px solid #fff; background:var(--bg-tint);
  box-shadow:var(--shadow);
}
.about-photo .frame img{ width:100%; height:100%; object-fit:cover; }
.about-photo::before{
  content:""; position:absolute; right:-6px; top:-14px;
  width:104px; height:84px;
  background-image:radial-gradient(var(--amber) 2.6px, transparent 2.7px);
  background-size:18px 18px; opacity:.9; z-index:-1;
}
.about-badge{
  position:absolute; left:-10px; bottom:24px;
  background:#fff; border-radius:18px; padding:14px 20px; box-shadow:var(--shadow);
}
.about-badge b{ font-family:var(--font-display); font-size:30px; font-weight:800; display:block; line-height:1; color:var(--teal-deep); }
.about-badge span{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); }
@media (max-width:980px){
  .about-photo{ display:flex; flex-direction:column; align-items:center; }
  .about-badge{ position:static; transform:none; left:auto; bottom:auto; margin-top:14px; padding:10px 18px; text-align:center; }
  .about-badge b{ font-size:22px; }
  .about-badge span{ font-size:10px; }
}
.about-body .section-title{ font-size:clamp(28px,3.8vw,46px); }
.about-body p{ margin-top:20px; font-size:18px; color:var(--ink-soft); max-width:52ch; text-wrap:pretty; }
.about-sign{ margin-top:26px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.about-sign .name{ font-family:var(--font-display); font-weight:800; font-size:20px; color:var(--ink); }
.about-sign .role{ font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-deep); background:var(--bg-tint); padding:7px 14px; border-radius:999px; }
@media (max-width:780px){ .about-grid{ grid-template-columns:1fr; } }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{ background:var(--bg-tint); }
.reviews-top{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.reviews-score{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:var(--radius); padding:18px 24px; box-shadow:var(--shadow-sm); }
.reviews-score .big{ font-family:var(--font-display); font-size:clamp(40px,5vw,58px); font-weight:800; line-height:.9; color:var(--teal-deep); }
.reviews-score .stars{ color:var(--amber-deep); font-size:17px; letter-spacing:2px; }
.reviews-score .meta{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px; }

.review-badges{ margin-top:clamp(30px,4vw,44px); display:flex; flex-wrap:wrap; gap:14px; }
.rbadge{ background:#fff; border-radius:999px; padding:13px 22px; box-shadow:var(--shadow-sm); display:flex; align-items:baseline; gap:10px; }
.rbadge b{ font-family:var(--font-display); font-weight:800; font-size:18px; color:var(--teal-deep); display:inline-flex; align-items:baseline; gap:3px; }
.rbadge b span{ color:var(--amber-deep); font-size:14px; }
.rbadge > span{ font-size:12.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; }

.quotes{ margin-top:clamp(28px,4vw,40px); columns:3; column-gap:22px; }
.quote{
  break-inside:avoid; margin-bottom:22px;
  background:#fff; border-radius:var(--radius); padding:26px 26px 24px;
  box-shadow:var(--shadow-sm); transition:transform .4s var(--ease), box-shadow .4s;
}
.quote:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.quote .qmark{ font-family:var(--font-display); font-size:50px; line-height:.5; color:var(--teal); display:block; margin-bottom:14px; }
.quote p{ font-size:16px; line-height:1.55; color:var(--ink); text-wrap:pretty; }
.quote .by{ margin-top:18px; display:flex; align-items:center; gap:11px; font-size:12.5px; font-weight:600; color:var(--ink-faint); letter-spacing:.02em; }
.quote .by .av{ width:30px; height:30px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:13px; flex:0 0 auto; }
.quote--upwork .by .av{ background:var(--amber); color:#3a2c00; }
@media (max-width:880px){ .quotes{ columns:2; } }
@media (max-width:560px){ .quotes{ columns:1; } }

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:0.72fr 1.28fr; gap:clamp(34px,6vw,76px); align-items:start; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{ background:var(--bg-tint); border-radius:var(--radius); overflow:hidden; transition:background .3s; }
.faq-item.open{ background:var(--bg-tint-2); }
.faq-q{
  width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 24px; font-family:var(--font-display); font-size:clamp(17px,1.8vw,20px); font-weight:700;
  letter-spacing:-0.01em; color:var(--ink);
}
.faq-q .pm{ position:relative; width:20px; height:20px; flex:0 0 auto; }
.faq-q .pm::before, .faq-q .pm::after{ content:""; position:absolute; background:var(--teal-deep); border-radius:2px; transition:transform .35s var(--ease); }
.faq-q .pm::before{ left:0; top:9px; width:20px; height:2px; }
.faq-q .pm::after{ left:9px; top:0; width:2px; height:20px; }
.faq-item.open .pm::after{ transform:scaleY(0); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .45s var(--ease); }
.faq-a-inner{ padding:0 24px 24px; font-size:16px; color:var(--ink-soft); max-width:60ch; line-height:1.6; text-wrap:pretty; }
@media (max-width:780px){ .faq-grid{ grid-template-columns:1fr; } }

/* ============================================================
   CONTACT  (teal wavy section)
   ============================================================ */
.contact{
  position:relative; background:var(--teal); color:var(--on-teal);
  margin-top:clamp(60px,9vw,110px); padding-block:clamp(72px,9vw,120px) clamp(60px,8vw,100px);
}
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start; }
.contact-lead h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,4.6vw,56px); line-height:1.06; letter-spacing:-0.025em; color:#fff; }
.contact-lead h2 em{ font-style:normal; color:#fff5db; }
.contact-lead .eyebrow{ color:#d6f5f5; }
.contact-lead .eyebrow .dot{ color:var(--amber); }
.contact-lead p{ margin-top:22px; font-size:18px; color:rgba(255,255,255,.88); max-width:42ch; text-wrap:pretty; }
.contact-direct{ margin-top:30px; display:flex; flex-direction:column; gap:13px; }
.contact-direct a{ display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:#fff; width:fit-content; }
.contact-direct a .ic{ color:var(--amber); display:inline-flex; align-items:center; flex:0 0 auto; }
.contact-direct a .ic svg{ display:block; }
.contact-direct a:hover{ color:#fff5db; }

.form{ display:grid; gap:16px; background:#fff; border-radius:var(--radius-lg); padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-lg); }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink); }
.field label .req{ color:var(--teal); }
.field input, .field select, .field textarea{
  font-family:var(--font-sans); font-size:16px; color:var(--ink);
  background:var(--bg-tint); border:2px solid transparent; border-radius:14px; padding:13px 15px;
  transition:border-color .25s, background .25s;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--teal); background:#fff; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2334b3b5' stroke-width='1.7' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.field textarea{ resize:vertical; min-height:104px; }
.field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#e0594e; }
.field .err{ font-size:12px; font-weight:600; color:#e0594e; display:none; }
.field.invalid .err{ display:block; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-platform-note{ font-size:13.5px; color:var(--teal-deep); background:var(--bg-tint); border-radius:12px; padding:12px 14px; line-height:1.45; }
.g-recaptcha{ transform-origin:0 0; }
@media (max-width:360px){ .g-recaptcha{ transform:scale(0.88); } }
.form-error{ font-size:13.5px; font-weight:600; color:#e0594e; background:#fdeceb; border-radius:12px; padding:11px 14px; margin:0; }
.form-submit{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.form-note{ font-size:12.5px; color:var(--ink-faint); }

.form-success{ display:none; flex-direction:column; gap:14px; background:#fff; border-radius:var(--radius-lg); padding:38px 32px; box-shadow:var(--shadow-lg); }
.form-success.show{ display:flex; }
.form.hide{ display:none; }
.form-success .tick{ width:50px; height:50px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font-size:24px; }
.form-success h3{ font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--ink); }
.form-success p{ color:var(--ink-soft); font-size:16px; max-width:42ch; }
@media (max-width:780px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding-block:50px; }
.footer-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.footer-links{ display:flex; gap:26px; flex-wrap:wrap; }
.footer-links a{ font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--ink-soft); transition:color .25s; }
.footer-links a:hover{ color:var(--teal-deep); }
.footer-legal{ margin-top:28px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
.footer-legal span{ font-size:12.5px; color:var(--ink-faint); }

/* ============================================================
   SCROLL REVEAL (transform-only — always visible)
   ============================================================ */
.reveal{ }
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ transform:translateY(22px); transition:transform .8s var(--ease); }
  .js .reveal.in{ transform:none; }
  .js .reveal.d1{ transition-delay:.08s; }
  .js .reveal.d2{ transition-delay:.16s; }
  .js .reveal.d3{ transition-delay:.24s; }
}

/* Waves follow the accent color */
.wave-svg path{ fill: var(--teal); }


/* ============================================================
   WORDPRESS INTEGRATION
   ============================================================ */
.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:-9999px; }
.skip-link:focus{ left:8px; top:8px; background:var(--teal); color:#fff; padding:10px 16px; border-radius:999px; z-index:1000; }

/* Custom logo */
.brand img.custom-logo, .brand img{ height:46px; width:auto; display:block; }
.footer .brand img.custom-logo, .footer .brand img{ height:42px; }
.brand--has-logo{ gap:0; }
.brand--has-logo .bmark{ display:none; }

/* Admin bar offset */
body.admin-bar .nav{ top:32px; }
@media screen and (max-width:782px){ body.admin-bar .nav{ top:46px; } }

/* Menus rendered as lists */
ul.nav-links{ list-style:none; margin:0; padding:0; }
ul.nav-links li{ display:flex; }
ul.footer-links{ list-style:none; margin:0; padding:0; display:flex; gap:26px; flex-wrap:wrap; }
ul.footer-links li{ display:flex; }
.nav-links .current-menu-item > a{ color:var(--ink); }
@media (max-width:880px){ ul.nav-links{ flex-direction:column; } ul.nav-links li{ width:100%; } }

/* Featured-image placeholder for works without an image */
.card-ph{ position:absolute; inset:0; background:
  radial-gradient(circle at 30% 30%, var(--bg-tint-2), var(--bg-tint)); }

/* Single portfolio work */
.single-wrap{ padding-top:clamp(120px,15vh,170px); padding-bottom:clamp(56px,8vw,100px); }
.single-back{ font-family:var(--font-display); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--teal-deep); display:inline-flex; gap:8px; align-items:center; margin-bottom:30px; }
.single-back:hover{ color:var(--teal); }
.single-head{ max-width:760px; }
.single-cats{ display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.single-cats a{ font-family:var(--font-display); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-deep); background:var(--bg-tint); border-radius:999px; padding:7px 15px; transition:background .25s; }
.single-cats a:hover{ background:var(--bg-tint-2); }
.single-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,5vw,56px); line-height:1.06; letter-spacing:-0.025em; }
.single-hero-img{ margin-block:clamp(32px,5vw,52px); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.single-hero-img img{ width:100%; height:auto; display:block; }
.entry-content{ font-size:18px; color:var(--ink-soft); line-height:1.75; max-width:none; }
/* Keep text comfortably readable while images/galleries span the full width */
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote{ max-width:74ch; }
.entry-content > * + *{ margin-top:22px; }
.entry-content h2,.entry-content h3{ font-family:var(--font-display); font-weight:800; color:var(--ink); letter-spacing:-0.01em; line-height:1.2; margin-top:40px; }
.entry-content h2{ font-size:30px; }
.entry-content h3{ font-size:23px; }
.entry-content img{ border-radius:var(--radius); height:auto; }
.entry-content a{ color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul,.entry-content ol{ padding-left:1.3em; }
.entry-content blockquote{ border-left:4px solid var(--teal); padding-left:22px; font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--ink); }
.entry-content figure{ margin:0; }
/* Single work: always stack images one below another (never side by side) */
.entry-content .wp-block-gallery,
.entry-content .wp-block-columns,
.entry-content .gallery,
.single-gallery{ display:flex !important; flex-direction:column !important; gap:clamp(16px,2vw,26px) !important; }
.entry-content .wp-block-gallery .wp-block-image,
.entry-content .wp-block-gallery figure,
.entry-content .gallery .gallery-item,
.entry-content .wp-block-column{ width:100% !important; max-width:100% !important; margin:0 !important; flex:0 0 auto !important; }
.entry-content .gallery br{ display:none; }
.entry-content img,
.single-gallery img{ width:100%; height:auto; display:block; }
.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter{ float:none !important; margin:0 0 clamp(16px,2vw,26px) !important; display:block; }
.single-gallery-img{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.single-gallery-img img{ width:100%; height:auto; display:block; }
.aligncenter,figure.aligncenter{ display:block; margin-inline:auto; }
.alignleft{ float:left; margin:6px 28px 18px 0; }
.alignright{ float:right; margin:6px 0 18px 28px; }
.wp-caption-text,figcaption{ font-size:13px; color:var(--ink-faint); margin-top:8px; text-align:center; }
.single-nav{ margin-top:clamp(46px,7vw,76px); padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.single-nav a{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.single-nav a:hover{ color:var(--teal-deep); }

/* Single work CTA (replaces the old plugin "Related projects") */
.single-cta{ margin-top:clamp(56px,9vw,110px); padding-block:clamp(60px,8vw,96px) clamp(50px,7vw,84px); text-align:center; }
.single-cta-title{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4.6vw,52px); line-height:1.06; letter-spacing:-0.025em; color:#fff; }
.single-cta-title em{ font-style:normal; color:#fff5db; }
.single-cta-actions{ margin-top:28px; display:flex; justify-content:center; }

/* Hide any leftover "related projects/posts" block from the old portfolio plugin */
.single-cta ~ .related-projects,
.related-projects, .related-posts, .rt-related-projects, .rara-related-projects,
.related-portfolio, [class*="related-project"], [class*="related_portfolio"],
.portfolio-related, .rt-portfolio-related{ display:none !important; }

/* Belt-and-suspenders so portfolio images never distort or crowd */
.single-hero-img img, .entry-content img, .single-gallery img{ width:100%; height:auto; max-width:100%; object-fit:contain; }
.entry-content > img,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .gallery,
.entry-content > p > img{ width:100%; max-width:100%; margin-inline:0; }
.entry-content .wp-block-image, .entry-content figure, .entry-content p img{ margin-block:clamp(16px,2vw,26px); }

/* Archive */
.archive-head{ padding-top:clamp(120px,15vh,170px); padding-bottom:clamp(16px,3vw,28px); }

/* Pagination */
.pagination{ margin-top:50px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.pagination .page-numbers{ font-family:var(--font-display); font-weight:600; font-size:14px; padding:10px 16px; border-radius:999px; background:var(--bg-tint); color:var(--ink-soft); }
.pagination .page-numbers.current{ background:var(--teal); color:#fff; }
.pagination .page-numbers:hover{ background:var(--bg-tint-2); color:var(--ink); }

/* Empty state */
.empty-note{ font-size:14px; color:var(--ink-faint); border:2px dashed var(--line); border-radius:var(--radius); padding:40px; text-align:center; grid-column:1 / -1; }

/* Contact Form 7 / plugin form, matched to the design */
.form--plugin .wpcf7-form{ display:grid; gap:16px; }
.form--plugin .wpcf7-form > p{ margin:0; }
.field .wpcf7-form-control-wrap{ display:block; width:100%; }
.wpcf7-not-valid-tip{ font-size:12px; font-weight:600; color:#e0594e; margin-top:6px; }
.wpcf7-form .wpcf7-not-valid{ border-color:#e0594e !important; }
.wpcf7 .wpcf7-response-output{ font-size:13px; border-radius:14px; padding:13px 15px; margin:6px 0 0; border:2px solid var(--line); color:var(--ink-soft); }
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--teal); color:var(--teal-deep); }
.form--plugin .wpcf7-submit{ margin-top:4px; }

/* FAQ multi-paragraph answers */
.faq-a-inner p{ margin:0; }
.faq-a-inner p + p{ margin-top:14px; }