:root{
  --navy:#062844;
  --navy2:#092f4e;
  --blue:#126ee8;
  --blue2:#0b5fc9;
  --ink:#102a43;
  --muted:#6d7e8d;
  --line:#dbe4eb;
  --pale:#f3f7fa;
  --white:#fff;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Calibri, "Segoe UI", Arial, sans-serif;color:var(--ink);background:#fff;line-height:1.45;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.035em;line-height:1.08}
h2{font-size:35px}
.eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:9px}
.btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 17px;border-radius:4px;font-size:14px;font-weight:700;transition:.2s}
.btn-primary{background:#116ee8;color:#fff}
.btn-primary:hover{background:#075bc5}
.btn-light{background:#fff;color:var(--navy)}
.btn-outline{border:1px solid rgba(255,255,255,.65);color:#fff}
.btn:hover{transform:translateY(-1px)}

/* HEADER — deliberately white, matching reference */
.header{height:68px;background:#fff;border-bottom:1px solid #e6ebef;position:relative;z-index:5}
.nav{height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:9px}
.logo-symbol{width:35px;height:35px;border-radius:50%;background:var(--navy);position:relative;overflow:hidden}
.logo-symbol:before{content:"";position:absolute;width:26px;height:26px;border-radius:50%;background:#fff;left:-4px;bottom:-5px}
.logo-symbol:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#ed2438;top:4px;right:4px}
.logo-text{font-size:14px;line-height:1;font-weight:800;letter-spacing:.025em;color:#132f47}
.logo-text small{display:block;font-size:7px;letter-spacing:.21em;margin-top:4px;color:#6b7b89}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600;color:#203a51;text-transform: uppercase;}
.nav-links a:hover{color:var(--blue)}
.nav-cta{background:var(--navy);color:#fff!important;padding:11px 17px;border-radius:3px}
.menu{display:none;background:none;border:0;font-size:23px;color:var(--navy)}

/* HERO */
.hero{
  height:500px;
  min-height:500px;
  position:relative;
  color:#fff;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(3,27,47,.86) 0%,rgba(4,36,60,.58) 42%,rgba(4,36,60,.08) 100%),
    url("/wp-content/uploads/2026/09/dorandama-hero-japan-india-banner-2400x1200-1.jpg") center center/100% 100% no-repeat;
}
.hero .container{
  min-height:500px;
  display:flex;
  align-items:center;
  position:relative;
  z-index:2;
}
.hero-content{
  width:68%;
  padding:40px 0 30px;
}
.hero h1{
  font-size:42px;
  line-height:1.08;
  max-width:720px;
  margin-bottom:17px;
  color: #fff ;
}
.hero-copy{
  font-size:15px;
  line-height:1.55;
  max-width:650px;
  color:rgba(255,255,255,.94);
  margin-bottom:22px;
}
.hero-points{
  display:flex;
  gap:24px;
  align-items:center;
  margin-bottom:24px;
}
.hero-point{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  line-height:1.2;
  font-weight:600;
  white-space:nowrap;
}
.hero-point i{
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  background:none;
  display:inline-block;
  font-style:normal;
  font-size:31px;
  line-height:1;
  color:#fff;
}
.hero-buttons{display:flex;gap:12px}

/* The supplied hero artwork already contains the Japanese and Indian flags.
   No additional HTML/CSS flag objects are layered over it. */
/* TRUST */
.trust{height:54px;border-bottom:1px solid #e2e8ed;background:#fff}
.trust .container{height:100%;display:flex;align-items:center}
.trust-title{width:29%;font-size:14px;line-height:1.35;font-weight:800;text-transform:uppercase;color:#173b5a;padding-right:28px;border-right:1px solid #b9c8d4}
.trust-items{flex:1;display:flex;justify-content:space-around}
.trust-item{font-size:14px;color:#50677a;font-weight:600;display:flex;align-items:center;gap:7px}
.trust-item b{font-size:18px;color:var(--blue);font-weight:500}

/* GENERAL SECTIONS */
.section{padding:31px 0}
.section-head{display:grid;grid-template-columns:1.15fr .85fr;gap:45px;align-items:end;margin-bottom:19px}
.section-head h2{font-size:28px;max-width:560px}
.section-head p{font-size:13px;line-height:1.55;color:var(--muted);/*max-width:390px*/}

/* SERVICES */
.services{padding-top:34px;padding-bottom:30px}
.service-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%;max-width:none}
.service{
  min-height:190px;border:1px solid var(--line);border-radius:4px;padding:22px 17px;background:#fff
}
.service-icon{
  width:auto;height:auto;border-radius:0;background:transparent;color:var(--blue);
  display:block;font-size:25px;line-height:1;margin-bottom:14px
}
.service h3{font-size:16px;line-height:1.17;letter-spacing:-.025em}
.service p{font-size:13.5px;line-height:1.48;color:var(--muted);margin-top:9px}

/* SEMICONDUCTOR — reference has a dark band with image centre/right and technical list */
.semi{
  background:var(--navy);
  color:#fff;
  padding:0;
}
.semi-inner{
  display:grid;
  grid-template-columns:39% 38% 23%;
  min-height:255px;
}
.semi-copy{padding:38px 25px 32px 0}
.semi-copy .eyebrow{color:#66b2ff}
.semi-copy h2{font-size:29px;max-width:350px;color: #fff;}
.semi-copy p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.78);max-width:390px;margin:12px 0 17px}
.semi-image{
  background:
    linear-gradient(90deg,var(--navy) 0%,rgba(6,40,68,.1) 25%),
    url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1300&q=86") center/cover
}
.semi-list{
  position:relative;
  padding:30px 20px;
  background:#e7ecef;
  display:flex;flex-direction:column;justify-content:center;gap:7px;
  min-height:285px;
}
.semi-list-title{font-size:13px;font-weight:800;margin-bottom:8px;color:var(--navy)}
.semi-list span{font-size:14px;color:#526676;line-height:1.28}
.semi-list span:before{content:"◉";color:#4eabff;font-size:6px;margin-right:6px}

@media(min-width:1209px){
  .semi-list:after{
    content:"";position:absolute;top:0;bottom:0;left:100%;
    width:calc((100vw - var(--max))/2 + 2px);background:#e7ecef;
  }
}
/* INDUSTRIES */
.industries{padding-top:28px;padding-bottom:28px}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.industry{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.industry-img{height:112px;background:center/cover}
.industry:nth-child(1) .industry-img{background-image:url("https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=800&q=82")}
.industry:nth-child(2) .industry-img{background-image:url("https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=82")}
.industry:nth-child(3) .industry-img{background-image:url("https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?auto=format&fit=crop&w=800&q=82")}
.industry:nth-child(4) .industry-img{background-image:url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=800&q=82")}
.industry-body{padding:12px 13px 14px}
.industry h3{font-size:14px}
.industry p{font-size:13px;color:var(--muted);margin-top:5px;line-height:1.45}

/* WHY */
.why{background:#f4f8fb;border-top:1px solid #e6edf2;border-bottom:1px solid #e6edf2;padding:26px 0}
.why .section-head{margin-bottom:17px}
.why-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid #d7e1e8;border-radius:5px;overflow:hidden;background:#fff}
.why-card{padding:17px 14px;border-right:1px solid #dfe7ed;display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:11px;min-height:84px}
.why-card:last-child{border-right:0}
.why-icon{font-size:33px;line-height:1;color:var(--blue);margin:0;display:block}
.why-copy{min-width:0}
.why-card strong{font-size:12px;display:block;line-height:1.18;font-weight:800}
.why-card span{font-size:11px;color:var(--muted);display:block;margin-top:4px;line-height:1.25}

/* INSIGHTS */
.insights{padding-top:30px;padding-bottom:30px}
.insights .section-head{margin-bottom:17px}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.insight{display:grid;grid-template-columns:120px 1fr;border:1px solid var(--line);border-radius:4px;overflow:hidden;min-height:116px}
.insight-img{background:center/cover}
.insight:nth-child(1) .insight-img{background-image:url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=700&q=82")}
.insight:nth-child(2) .insight-img{background-image:url("https://images.unsplash.com/photo-1494526585095-c41746248156?auto=format&fit=crop&w=700&q=82")}
.insight:nth-child(3) .insight-img{background-image:url("https://images.unsplash.com/photo-1581092795360-fd1ca04f0952?auto=format&fit=crop&w=700&q=82")}
.insight-body{padding:13px}
.insight-meta{font-size:11px;color:var(--blue);font-weight:800;text-transform:uppercase}
.insight h3{font-size:13px;margin:5px 0 3px;line-height:1.24}
.insight-date{font-size:10px;color:#8a98a4;margin-bottom:6px}
.insight p{font-size:13px;color:var(--muted);line-height:1.42}

/* CTA */
.cta{
  min-height:230px;
  display:flex;
  align-items:center;
  background:
    linear-gradient(90deg,rgba(3,30,52,.98) 0%,rgba(3,42,69,.92) 43%,rgba(3,42,69,.48) 70%,rgba(3,42,69,.12) 100%),
    url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=2200&q=85") center/cover;
  color:#fff;padding:42px 0
}
.cta-inner{display:block}
.cta-copy{max-width:610px}
.cta h2{font-size:29px; color: #fff;}
.cta p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.78);margin-top:9px;max-width:590px}
.cta-buttons{display:flex;gap:9px;white-space:nowrap;margin-top:20px}

/* FOOTER */
.footer{padding:25px 0 13px;background:#fff}
.footer-grid{display:grid;grid-template-columns:1.55fr .85fr .85fr .85fr;gap:30px;padding-bottom:22px}
.footer .logo{margin-bottom:9px}
.footer-description{font-size:13px;line-height:1.5;color:var(--muted);max-width:260px}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.07em;margin:3px 0 8px}
.footer a{display:block;font-size:13px;color:var(--muted);margin:4px 0}
.footer a:hover{color:var(--blue)}
.footer-bottom{border-top:1px solid var(--line);padding-top:12px;display:flex;justify-content:space-between;color:#8a98a4;font-size:12px}
.socials{display:flex;gap:5px}
.social{width:21px;height:21px;background:#eef3f7;border-radius:3px;display:grid!important;place-items:center;font-size:8px!important;color:var(--navy)!important;margin:0!important}



/* =========================
   RESPONSIVE SYSTEM
   ========================= */

/* Tablet / compact desktop */
@media (max-width: 1100px){
  .container{width:min(calc(100% - 36px),var(--max))}
  .nav-links{gap:15px;font-size:9.5px}
  .nav-cta{padding:10px 13px;font-size:9.5px}

  .hero-content{width:72%}
  .hero h1{font-size:40px}

  .service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .service{min-height:180px}

  .semi-inner{grid-template-columns:40% 35% 25%}
  .semi-list{min-height:285px}

  .why-grid{grid-template-columns:repeat(3,1fr)}
  .why-card:nth-child(3){border-right:0}

  .insight-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px}
}

/* Mobile / tablet */
@media (max-width: 760px){
  .container{
    width:calc(100% - 30px);
    max-width:none;
  }

  /* Header: logo | Enquire | hamburger */
  .header,.nav{height:62px}
  .nav{gap:7px}
  .logo{min-width:0;flex:1 1 auto}
  .logo-text{
    font-size:12px;
    white-space:nowrap;
  }
  .logo-text small{font-size:6.5px}
  .logo-symbol{width:32px;height:32px;flex:0 0 32px}
  .nav-top-cta{
    display:inline-flex!important;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    padding:9px 10px;
    margin:0;
    font-size:14px;
    white-space:nowrap;
  }
  .menu{
    display:block!important;
    flex:0 0 28px;
    width:28px;
    height:36px;
    padding:0;
    line-height:1;
  }

  .nav-links{
    position:absolute;
    top:62px;
    left:15px;
    right:15px;
    width:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 16px;
    background:#fff;
    border:1px solid #dbe4eb;
    border-radius:4px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-7px);
    transition:.18s ease;
    z-index:100;
  }
  .nav-links.menu-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav-links a{
    display:block;
    padding:10px 0;
    border-bottom:1px solid #eef2f5;
    font-size:10px;
  }
  .nav-links a:last-child{border-bottom:0}

  /* Hero */
  .hero{
    height:500px;
    min-height:500px;
    background:
      linear-gradient(90deg,rgba(3,27,47,.91) 0%,rgba(4,36,60,.67) 58%,rgba(4,36,60,.12) 100%),
      url("dorandama-hero-japan-india-banner-2400x1200.jpg") center center/100% 100% no-repeat;
  }
  .hero .container{
    min-height:500px;
    height:100%;
  }
  .hero-content{
    width:100%;
    padding:65px 0 24px;
  }
  .hero h1{
    font-size:34px;
    line-height:1.08;
    max-width:650px;
  }
  .hero-copy{
    font-size:12px;
    line-height:1.5;
    max-width:650px;
    margin-bottom:16px;
  }
  .hero-points{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px 15px;
    margin-bottom:17px;
  }
  .hero-point{
    white-space:normal;
    font-size:9.5px;
  }
  .hero-point i{font-size:25px}
  .hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .hero-buttons .btn{
    max-width:100%;
    font-size:14px;
    padding:0 12px;
  }

  /* Trust strip */
  .trust{height:auto;padding:13px 0}
  .trust .container{
    height:auto;
    display:block;
  }
  .trust-title{
    width:100%;
    padding:0 0 9px;
    border-right:0;
    border-bottom:1px solid #b9c8d4;
    font-size:13px;
  }
  .trust-items{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px 15px;
    padding-top:9px;
  }
  .trust-item{
    min-width:0;
    font-size:9px;
  }

  /* Section headers */
  .section{padding:28px 0}
  .section-head{
    display:block;
    margin-bottom:18px;
  }
  .section-head h2{
    font-size:27px;
    max-width:680px;
  }
  .section-head p{
    max-width:none;
    margin-top:11px;
    font-size:13px;
  }

  /* Services */
  .service-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .service{
    min-width:0;
    min-height:170px;
    padding:18px 14px;
  }
  .service h3{font-size:14px}
  .service p{font-size:14px}

  /* Semiconductor */
  .semi-inner{
    display:block;
    min-height:0;
  }
  .semi-copy{
    padding:30px 0 25px;
  }
  .semi-copy h2{font-size:28px}
  .semi-copy p{font-size:14px;max-width:none}
  .semi-image{height:250px}
  .semi-list{
    min-height:0;
    padding:24px 15px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px 15px;
  }
  .semi-list span{min-width:0}

  /* Industry */
  .industry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .industry-img{height:120px}
  .industry-body{padding:12px}
  .industry h3{font-size:12px}

  /* Why Choose */
  .why{padding:25px 0}
  .why-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .why-card{
    min-width:0;
    min-height:84px;
    grid-template-columns:38px minmax(0,1fr);
    column-gap:9px;
    padding:14px 11px;
  }
  .why-card:nth-child(2n){border-right:0}
  .why-icon{font-size:29px}
  .why-card strong{font-size:12px}
  .why-card span{font-size:11px}

  /* Insights */
  .insight-grid{grid-template-columns:1fr}
  .insight{
    grid-template-columns:120px minmax(0,1fr);
    min-width:0;
  }

  /* CTA */
  .cta{
    min-height:260px;
    padding:36px 0;
  }
  .cta-inner{display:block}
  .cta-copy{max-width:650px}
  .cta h2{font-size:27px}
  .cta p{font-size:13px;max-width:none}
  .cta-buttons{
    margin-top:18px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    white-space:normal;
  }

  /* Footer */
  .footer{padding:25px 0 13px}
  .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 18px;
  }
  .footer-description{max-width:none}
}


/* Mobile polish — trust icons, semiconductor gray panel, header spacing */
@media (max-width:760px){
  /* Four trust points should use the full row instead of stacking toward the left. */
  .trust-items{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    width:100%;
  }
  .trust-item{
    min-width:0;
    justify-content:center;
    text-align:center;
    flex-direction:column;
    gap:4px;
    line-height:1.2;
    padding:2px 3px;
  }
  .trust-item b{
    font-size:16px;
    line-height:1;
  }

  /* The gray Key Areas panel must run edge-to-edge on mobile.
     Break it out of the normal container width. */
  .semi-list{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:max(15px, calc((100vw - var(--max))/2));
    padding-right:max(15px, calc((100vw - var(--max))/2));
    background:#e7ecef;
  }

  /* Preserve the hero artwork proportions on mobile. */
  .hero{
    height:430px;
    min-height:430px;
    background-size:auto 100%;
    background-position:center center;
  }
  .hero .container{
    height:430px;
    min-height:430px;
  }

  /* Give Enquire Now a deliberate gap from the hamburger. */
  .nav-top-cta{
    margin-right:12px;
  }
}

@media (max-width:480px){
  /* Keep all four trust points on one balanced row on small phones. */
  .trust-items{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
  }
  .trust-item{
    font-size:7.5px;
    padding:2px 1px;
  }
  .trust-item b{font-size:14px}

  /* More breathing room between Enquire and hamburger. */
  .nav-top-cta{margin-right:10px}
}

/* Small phones */
@media (max-width: 480px){
  .container{width:calc(100% - 24px)}

  .logo-text{font-size:10px}
  .logo-text small{font-size:5.5px;letter-spacing:.16em}
  .logo-symbol{width:29px;height:29px;flex-basis:29px}
  .nav{gap:5px}
  .nav-top-cta{
    font-size:12.5px;
    padding:8px 8px;
  }
  .menu{flex-basis:25px;width:25px;font-size:21px}

  /* Preserve the 2:1 hero artwork ratio on phones rather than stretching it.
     The hero becomes shorter so the artwork is not vertically squeezed. */
  .hero{
    height:400px;
    min-height:400px;
    background-size:auto 100%;
    background-position:center center;
  }
  .hero .container{
    height:400px;
    min-height:400px;
  }
  .hero-content{padding-top:28px}
  .hero h1{font-size:29px}
  .hero-copy{font-size:14px}
  .hero-points{gap:10px}
  .hero-point{font-size:13px;gap:6px}
  .hero-point i{font-size:22px}
  .hero-buttons .btn{
    height:38px;
    font-size:14px;
    padding:0 10px;
  }

  /* On phones, use a balanced 2 x 2 arrangement. */
  .trust-items{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,auto);gap:6px 10px}
  .trust-item{flex-direction:row;justify-content:center;text-align:left;font-size:8.5px;gap:5px;padding:3px 2px}
  .trust-item b{font-size:15px}
  .section{padding:25px 0}
  .section-head h2{font-size:24px}

  .service-grid,.industry-grid{grid-template-columns:1fr}
  .service{min-height:150px}
  .service h3{font-size:15px}
  .service p{font-size:14px}

  .semi-list{grid-template-columns:1fr}
  .semi-image{height:250px;width: 93vw;}

  .why-grid{grid-template-columns:1fr}
  .why-card{
    border-right:0;
    border-bottom:1px solid #dfe7ed;
    grid-template-columns:42px minmax(0,1fr);
  }
  .why-card:last-child{border-bottom:0}

  .insight{grid-template-columns:105px minmax(0,1fr)}
  .insight h3{font-size:11px}
  .insight p{font-size:11px}

  .cta{min-height:280px}
  .cta h2{font-size:24px}
  .cta-buttons .btn{width:100%;justify-content:center}

  .footer-grid{grid-template-columns:1fr}
}


/* Prevent grid children from creating horizontal overflow */
.service-grid > *, .industry-grid > *, .why-grid > *, .insight-grid > *,
.footer-grid > *, .semi-inner > *, .section-head > * {min-width:0}

</style>

<style id="trust-2x2-perfect-alignment">
@media (max-width:760px){
  .trust-items{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows:repeat(2, auto) !important;
    column-gap:28px !important;
    row-gap:18px !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
    align-items:center !important;
    justify-items:stretch !important;
  }

  .trust-item{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:left !important;
    gap:9px !important;
    line-height:1.2 !important;
  }

  .trust-item b{
    flex:0 0 auto !important;
    width:34px !important;
    height:34px !important;
    display:grid !important;
    place-items:center !important;
    font-size:20px !important;
    line-height:1 !important;
  }

  .trust-item span,
  .trust-item strong,
  .trust-item em{
    text-align:left !important;
  }
}

@media (max-width:480px){
  .trust-items{
    column-gap:18px !important;
    row-gap:16px !important;
    max-width:420px !important;
  }

  .trust-item{
    gap:7px !important;
    font-size:9px !important;
  }

  .trust-item b{
    width:30px !important;
    height:30px !important;
    font-size:17px !important;
  }
}
</style>


<style id="mobile-small-text-14px">
@media (max-width:760px){
  .trust-item,
  .trust-item span,
  .trust-item strong,
  .trust-item em,
  .why-card,
  .why-card p,
  .why-card small,
  .why-card .subtext,
  .semi-list,
  .industry-card p,
  .service-card p,
  .insight-card p,
  .insight-card .date {
    font-size:14px !important;
  }
}

/* =========================================================
   DORANDA MASAYUME — CONTACT FORM 7
   Enquiry Form
   ========================================================= */

.dorandama-form {
    width: 100%;
    color: #263746;
    font-family: Calibri, "Segoe UI", Arial, sans-serif;
}

/* ---------- Form Grid ---------- */

.dorandama-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 24px;
}

.dorandama-field {
    min-width: 0;
}

.dorandama-field-full {
    grid-column: 1 / -1;
}


/* ---------- Labels ---------- */

.dorandama-field label {
    display: block;
    margin: 0 0 8px;
    color: #243746;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
}

.dorandama-field .required {
    color: #b54a4a;
}

.dorandama-field .label-jp {
    display: inline;
    margin-left: 7px;
    color: #7a8792;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
}


/* ---------- Inputs / Select / Textarea ---------- */

.dorandama-field input[type="text"],
.dorandama-field input[type="email"],
.dorandama-field input[type="tel"],
.dorandama-field select,
.dorandama-field textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #d9e1e8;
    border-radius: 10px;
    background: #ffffff;
    color: #263746;
    outline: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    box-sizing: border-box;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* ---------- Text Inputs ---------- */

.dorandama-field input[type="text"],
.dorandama-field input[type="email"],
.dorandama-field input[type="tel"],
.dorandama-field select {
    height: 50px;
    padding: 0 14px;
}


/* ---------- Textarea ---------- */

.dorandama-field textarea {
    min-height: 125px;
    padding: 13px 14px;
    resize: vertical;
    line-height: 1.5;
}


/* ---------- Placeholder ---------- */

.dorandama-field input::placeholder,
.dorandama-field textarea::placeholder {
    color: #9aa7b2;
    opacity: 1;
}


/* ---------- Focus ---------- */

.dorandama-field input[type="text"]:focus,
.dorandama-field input[type="email"]:focus,
.dorandama-field input[type="tel"]:focus,
.dorandama-field select:focus,
.dorandama-field textarea:focus {
    border-color: #3774a8;
    box-shadow: 0 0 0 3px rgba(55, 116, 168, 0.11);
}


/* ---------- Select ---------- */

.dorandama-field select {
    appearance: auto;
    cursor: pointer;
}


/* =========================================================
   PREFERRED CONTACT METHOD
   ========================================================= */

.dorandama-contact-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 42px;
}


/*
   CF7 generates labels around the radio inputs when
   use_label_element is used.
*/

.dorandama-contact-options label {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin: 0;
    padding: 0;

    color: #425362;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;

    cursor: pointer;
}

.dorandama-contact-options input[type="radio"] {
    width: 17px;
    height: 17px;

    margin: 0;

    accent-color: #123f70;
    cursor: pointer;
}


/* =========================================================
   FORM BOTTOM / CTA
   ========================================================= */

.dorandama-form-bottom {
    margin-top: 26px;
    padding-top: 24px;

    border-top: 1px solid #e8edf1;

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

    gap: 20px;
}


/* ---------- Disclaimer ---------- */

.dorandama-form-note {
    margin: 0;

    max-width: 500px;

    color: #667585;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}


/* ---------- Submit Button ---------- */

.dorandama-form .dorandama-submit {
    flex: 0 0 auto;

    min-width: 225px;
    min-height: 50px;

    margin: 0;
    padding: 0 24px;

    border: 0;
    border-radius: 8px;

    background: #123f70;
    color: #ffffff;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.15;

    text-align: center;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.dorandama-form .dorandama-submit:hover {
    background: #0d3158;
    transform: translateY(-1px);
}

.dorandama-form .dorandama-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(55, 116, 168, 0.18);
}

.dorandama-form .dorandama-submit:active {
    transform: translateY(0);
}


/* =========================================================
   CF7 RESPONSE / VALIDATION
   ========================================================= */

/*
   Hide the default CF7 response styling visually.
   We will later replace this with our custom AJAX success
   state when we build the popup.
*/

.dorandama-form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 14px;

    border: 1px solid #d9e1e8;

    border-radius: 8px;

    font-size: 13px;
    line-height: 1.45;
}


/* Field validation */

.dorandama-form .wpcf7-not-valid {
    border-color: #c45a5a !important;
}

.dorandama-form .wpcf7-not-valid:focus {
    border-color: #c45a5a !important;
    box-shadow: 0 0 0 3px rgba(196, 90, 90, 0.10) !important;
}

.dorandama-form .wpcf7-not-valid-tip {
    margin-top: 6px;

    color: #b54a4a;

    font-size: 12px;
    line-height: 1.4;
}


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

@media (max-width: 700px) {

    .dorandama-form-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .dorandama-field-full {
        grid-column: auto;
    }

    .dorandama-form-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .dorandama-form-note {
        max-width: none;
    }

    .dorandama-form .dorandama-submit {
        width: 100%;
        min-width: 0;

        min-height: 54px;

        padding: 8px 18px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .dorandama-form-grid {
        gap: 16px;
    }

    .dorandama-field label {
        font-size: 14px;
    }

    .dorandama-field .label-jp {
        margin-left: 5px;
        font-size: 11px;
    }

    .dorandama-contact-options {
        gap: 13px 18px;
    }

    .dorandama-contact-options label {
        font-size: 14px;
    }

    .dorandama-form-note {
        font-size: 11px;
    }

}

/* =========================================================
   DORANDAMA ENQUIRY FORM — OUTER CARD + HEADER
   ========================================================= */

.dorandama-form-card {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: 0 20px 55px rgba(18, 63, 112, 0.14);
}


/* ---------- Blue Header ---------- */

.dorandama-form-header {
    position: relative;

    padding: 34px 42px 30px;

    background:
        linear-gradient(
            135deg,
            #0d3158 0%,
            #123f70 100%
        );

    color: #ffffff;

    overflow: hidden;
}


/* subtle decorative light */

.dorandama-form-header::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 190px;
    height: 100%;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(255,255,255,0.07)
        );

    pointer-events: none;
}


/* ---------- Eyebrow ---------- */

.dorandama-form-eyebrow {font-size:12px;font-weight:700;color: rgba(255,255,255,0.82);letter-spacing:1.5px;text-transform:uppercase;opacity:.82;margin-bottom:8px}




/* ---------- Heading ---------- */

.dorandama-form-header h2 
{margin:0 0 8px;font-size:30px;line-height:1.2;color: #ffffff;font-weight:700;font-family: Calibri, "Segoe UI", Arial, sans-serif;}




/* ---------- Intro ---------- */

.dorandama-form-header p {
    position: relative;
    z-index: 1;

    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,0.90);

    font-family: Calibri, "Segoe UI", Arial, sans-serif;

    font-size: 15px;
    line-height: 1.55;
}


/* ---------- White Content Area ---------- */

.dorandama-form-body {
    padding: 34px 42px 38px;

    background: #ffffff;
}


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

@media (max-width: 700px) {

    .dorandama-form-card {
        border-radius: 14px;
    }

    .dorandama-form-header {
        padding: 28px 24px 25px;
    }

    .dorandama-form-header h2 {
        font-size: 25px;
    }

    .dorandama-form-header p {
        font-size: 14px;
    }

    .dorandama-form-body {
        padding: 26px 24px 30px;
    }

}


@media (max-width: 420px) {

    .dorandama-form-header {
        padding: 25px 18px 22px;
    }

    .dorandama-form-header h2 {
        font-size: 22px;
    }

    .dorandama-form-body {
        padding: 23px 18px 26px;
    }

}

/* =========================================
   DORANDAMA ENQUIRY POPUP — FUNCTIONAL
   ========================================= */

.dorandama-enquiry-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.dorandama-enquiry-popup.is-open {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dorandama-enquiry-overlay {
    position: absolute;
    inset: 0;
    background: rgba(8, 25, 43, 0.72);
}

.dorandama-enquiry-modal {
    position: relative;
    z-index: 2;

    width: calc(100% - 32px);
    max-width: 900px;
    max-height: calc(100vh - 32px);

    overflow-y: auto;

    margin: 16px;
}

.dorandama-enquiry-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 10;

    width: 34px;
    height: 34px;

    padding: 0;
    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.15);
    color: #fff;

    font-size: 25px;
    line-height: 34px;
    text-align: center;

    cursor: pointer;
}

.dorandama-enquiry-close:hover {
    background: rgba(255,255,255,.25);
}


/* Prevent page scrolling while popup is open */

body.dorandama-popup-open {
    overflow: hidden;
}


@media (max-width: 700px) {

    .dorandama-enquiry-modal {
        width: calc(100% - 20px);
        max-height: calc(100vh - 20px);
        margin: 10px;
    }

}

.dorandama-form-success {
    display: none;
}

.dorandama-enquiry-modal.dorandama-show-success .dorandama-form-card {
    display: none;
}

.dorandama-enquiry-modal.dorandama-show-success .dorandama-form-success {
    display: block;
    background: #fff;
    border-radius: 16px;
    padding: 55px 40px;
    text-align: center;
}

.dorandama-success-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;

    border-radius: 50%;

    background: #123f70;
    color: #fff;

    font-size: 30px;
    line-height: 58px;
    font-weight: 700;
}

.dorandama-form-success h2 {
    margin: 0 0 10px;
    color: #123f70;
    font-size: 28px;
}

.dorandama-form-success p {
    max-width: 560px;
    margin: 0 auto 12px;
    color: #526271;
    font-size: 14px;
    line-height: 1.6;
}

.dorandama-success-jp {
    color: #7a8792 !important;
    font-size: 12px !important;
}

.dorandama-success-close {
    margin-top: 18px;
    padding: 11px 25px;

    border: 0;
    border-radius: 7px;

    background: #123f70;
    color: #fff;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.dorandama-enquiry-popup .wpcf7-response-output {
    display: none !important;
}